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, ol padding. Вы должны перезаписать это.

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

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

Answer 2

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

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

Answer 3

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

ul {
   padding:0;
   margin:0;
}

Answer 4

Как сказал @Nenad Vracar, 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 5

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

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

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

* {
    padding: 0;
    margin: 0;
}