Всегда ли в маркированном элементе списка отступ равен 1.8em?

Question

Я сделал выпадающее меню только для css.Требовалось иметь горизонтальную полосу элементов, каждый из которых может выпасть из вертикального меню.Кроме того, эти пункты не должны опускать третичное меню, а просто показывают маркированные списки.Мой HTML имеет три вложенных ul, и меню отлично работает во всех современных браузерах.Это выглядит так:

Однако мне не понравилось, как более темное поле за ссылкой начинается справа от маркера и не растягивается по всей ширине меню, поэтомуЯ немного поиграл и, наконец, пришел к этой настройке:

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

Теперь пункт маркированного меню выглядит так, как я хотел:

И из-захарактер em относительно размера шрифта, он работает независимо от размера шрифта, как показано здесь с увеличенным размером шрифта:

Я проверил это в ИнтернетеExplorer 8 + 9 + 10 (превью для разработчиков), Firefox 3 + 7, последний Chrome, Opera и Safari, и он работает как шарм.

Однако я просто не понимаю, почему это именно 1.8em это делает работу.Почему каждый браузер делает отступы от элементов пули именно так далеко?Я искал в интернете эту тему, но ничего полезного не нашел.Могу ли я быть уверен, что это работает в будущих браузерах?Эти 1.8em указаны в стандарте HTML?

Заранее благодарим за любую подсказку!

Редактировать:

К DisgruntledGoat's ответ: Это не сработало бы, если бы я использовал 1em / -1em или 20px / -20px.С этим стилем:

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

Я получаю этот результат (очевидно, не масштабирующийся с размером шрифта) для разных размеров шрифта:

Аналогично 1em /-1em также выключен и выглядит справа на картинке выше, но масштабируется с размером шрифта.По-прежнему похоже, что 1,8em - это волшебное расстояние по какой-то причине ...

Answer 1

На основании многих лет несовместимых браузеров - я бы сказал, что вы не можете доверять им, чтобы они всегда были последовательными.Лучший вариант - принудительно управлять им самостоятельно.

Вы можете использовать это, одновременно устанавливая отступы слева и поля слева li.Например:

li {
  margin-left: 1.8em;
  padding-left: 0;      
}

Очевидно, что некоторые (в основном старые) браузеры используют заполнение и некоторое поле - поэтому обязательно установите оба.

Answer 2

Учитывая ваш код, вы настроили ul таким образом, чтобы в нем не было полей или отступов.Тем не менее, вы настроили свои li так, чтобы они имели margin-left: 1.8em:

#nav li ul li ul li {
    display: list-item;
    margin-left:1.8em;
    list-style:disc outside none;
}

#nav li ul li ul li {
    margin-left: 1.8em;
    padding-left: 0;
}

И вот оно.

Answer 3

Вы обязательно должны сделать сброс CSS, а затем установить свойства так, как вам нужно. Никогда не доверяйте браузерам быть последовательными. Это добавляет немного кодирования, но в то же время будущее подтверждает ваш код.

Answer 4

Чтобы ответить на вопрос и ваш комментарий: ваше решение работает, потому что вы отменяете заполнение с точно такой же разницей в размере. Но интервал слева от списка больше с увеличением размера шрифта. Вы получите тот же результат с отступом 1em и полем -1em или 20px и -20px.

Как я уже упоминал в комментарии, фактический отступ по умолчанию для списков составляет 40 пикселей. Чтобы сделать вещи еще более запутанными, при проверке таблиц стилей пользовательских агентов (в Chrome Dev Tool и Firebug для Firefox) они сообщают уникальные свойства CSS: -webkit-padding-start или -moz-padding-start соответственно.

Я предполагаю, что эти специальные свойства используются вместо обычного заполнения, поскольку списки являются особым случаем в HTML - они содержат висячие маркеры / числа, которые не учитываются при заполнении.