список HTML не следует правилам маржинальных CSS

Question

Поэтому у меня есть код, который устанавливает предел по умолчанию и отступы для HTML до 0

CSS:

body,html { 
    padding: 0; margin: 0; 
    width:100%;font-family:arial; 
} 
#headingUl li{ 
    list-style-type:none; 
} 
    </style>  

HTML:

<div id="heading"> 
    <ul id="headingUl"> 
     <li>a</li> 
     <li>b</li> 
     <li>b</li> 
    </ul> 
</div 

... но списки все еще имеют левое поле.

Answer 1

#headingUl { 
    list-style-type:none; 
    padding: 0; 
    margin: 0; 
} 

браузеры установлены по умолчанию UL, ола заполнение. Вам нужно перезаписать его.

Вы можете сбросить его на все списки, чтобы не беспокоиться об этом снова:

ul, ol { 
    list-style-type:none; 
    padding: 0; 
    margin: 0; 
} 

Answer 2

Для того, чтобы избежать такого поведения, вы должны сбросить автоматические стили.

*{ 
    margin:0px; 
    padding: 0px; 
} 

Answer 3

В @Nenad Врачар сказал ul элемент имеет padding-left или margin-left значение по умолчанию установлено значение 40px.

См документации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation

Вам нужно переписать это следующим образом:

#headingUl { padding-left:0; margin-left: 0; } 

В Internet Explorer и Opera, списки с отступом, установив левый отступ 40 пикселей на элемент. Gecko, с другой стороны, задает левый отступ 40 пикселов для элемента

Answer 4

Вы присвоенный padding:0; и margin:0; в html контейнера и body контейнера, который не будет влиять на внутренние элементы, так что вы должны добавить следуя вашим стилям:

ul { 
    padding:0; 
    margin:0; 
} 

Answer 5

Я рекомендую вам выполнить жесткий сброс всех свойств с помощью программы, созданной Эриком Мейером - Сброс CSS.

http://meyerweb.com/eric/tools/css/reset/

Для быстрого избавления от ненужного использования заполнения кода ниже

* { 
    padding: 0; 
    margin: 0; 
}