Горизонтальное вертикальное заполнение меню для тега привязки не влияет

Question

Мне интересно, почему в следующем примере верхний и нижний отступы не влияют на тег привязки, в то время как левый и правый -? 1001 *

<ul id="nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>

    #nav{
        list-style:none;
    }
    #nav li{
        border:1px solid #666;
        display:inline;
       /*If you do it this way you need to set the top and bottom 
         padding to be the same here as under #nav li a
        padding:8px 0; */
    }
    #nav li a{
        padding:8px 16px;
    }

Пример: Ссылка

Итак, мой главный вопрос: почему верхний и нижний отступы не влияют на элементы списка, тогда как левый и правый влияют?

Я попробовал это с плавающей точкой вместо отображения: встроенный в элемент списка, и он работал так, как я ожидал. Так что, думаю, если бы у меня был второстепенный вопрос, в чем разница между float: left; и дисплей: встроенный? Я читал спецификацию поплавка и звучит так, как будто поплавок по-прежнему встроен в онлайн-бокс, так что он похож на inline-block?

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

Спасибо
Леви

Answer 1

Якоря являются встроенными элементами. Только элементы уровня блока могут иметь измененные атрибуты top / bottom.

Вы можете переопределить, выполнив:

a
{
    display: block;
    float: left;
}

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

Answer 2

Неясный угол спецификации CSS на самом деле указывает на то, что display: block является ненужным компаньоном для float: left.

Причина для бессмысленного заполнения - это ... встроенные элементы. Интересный факт: встроенные элементы будут принимать значения отступов, но это заполнение не повлияет на макет окружающего контента.

Чтобы получить желаемые результаты с учетом разметки и стилей выше, я бы предложил просто изменить значение display элементов li на inline-block и использовать значение line-height или position: relative и т. Д. вертикальная компоновка ссылок при ограничении всех значений вашего ящика элементами списка.

Чем старше браузер, тем сложнее будут эти стили; подробности об этом могут продолжаться в нескольких абзацах.

При работе с такими решениями следует помнить о трех проблемах поддержки:

1. В IE6 display: inline-block применяется только к элементам, которые имеют время выполнения display значение inline. Спецификация HTML4 может помочь вам отличить овец от козлов от этого.
2. Firefox 2.x не поддерживает значение inline-block, но имеет расширение -moz-inline-block CSS.
3. Промежуточные пробелы исходного кода отображаются между элементами встроенного блока, как и между встроенными элементами, что может привести к нежелательным результатам при отсутствии тщательного форматирования исходной разметки.