Inline элементы и padding

Вы когда нибудь пробывали добавить padding к тегу <li> к содержимому которого был применен display:inline ? Вы наблюдали, что padding для <li> выглядит необычно?

В примере ниже мы использовали 2 списка, расположенных один под другим. К элементам <li> этих списков применен display:inline и установлен padding:20px для всех сторон. К сожалению, padding сверху и снизу был проигнорирован из-за чего элементы накладываются друг на друга. А вот как воспринимают padding блочные элементы. Для <li> был применен display: block Чтоб понять почему это случилось нужно смотреть на то как воспримнимают свойства (width, height, padding, margin) блочные и inline элементы.

Блочные элементы

Inline элементы

Измерение - основное отличие между блочными и inline элементами

Если Вы попытаетсь добавить измерение для inline элементов, то некоторые из них будут работать, некоторые будут работать частично, а некоторые будут полностью игнорироватся. К таким свойствам относятся width, height, padding, margin. В случае с блочными элементами, то вышеперечисленные свойства корректно в блочных элементах.

Ширина inline элементов.

Согласно спецификации W3C CSS2 ширина для inline элементов не применяется. В примере видно, что установленная ширина (width:100px;) для inline элемента <a> полностью игнорируется всеми браузерами.

Высота inline элементов.

Согласно спецификации W3C CSS2 высота для inline элементов не применияется. В примере видно, что установленная высота (width:50px;) для inline элемента <a> полностью игнорируется всеми браузерами и равна высоте строки установленной с помощью свойства line-height.

Свойство padding для inline элементов.

Свойство padding может быть добавленно для всех сторон inline элемента но работать будет только для боковых сторон. Вертикальные отступы хоть и добавляются но место под них не выделяется и элемент налазит на другие элементы. В примере ниже определено свойство padding (padding:50px;) для тега <a>

Свойство margin для inline элементов.

Свойство margin может быть добавленно для всех сторон inline элемента но работать будет только для боковых сторон. В примере ниже определено свойство margin (margin:50px;) для тега <a>

Изменение свойства display для inline элементов.

Для inline элементов возможно изменить свойство display, что присвоит элементу все свойства присущие для блочных элементов. В следствии чего станут возможными для применения свойства (width, height, padding, margin), также как и для блочных элементов.
В примере ниже мы устанавливаем display:block; для тега <a> и он получает все свойства присущие для блочных элементов, что позволяет расширить возможности этого тега.

Изменение свойства display для блочных элементов.

Также возможно изменить изменить свойство display, что присвоит блочному элементу свойства inline элементов.