Inline элементы и padding
Вы когда нибудь пробывали добавить padding к тегу
<li> к содержимому которого был применен
display:inline ? Вы наблюдали, что padding для
<li> выглядит необычно?
В примере ниже мы использовали 2 списка, расположенных один под другим. К элементам
<li> этих списков применен
display:inline и установлен
padding:20px для всех сторон. К сожалению, padding сверху и снизу был проигнорирован из-за чего элементы накладываются друг на друга.
- Error sit volup tatem
- Error sit volup tatem
А вот как воспринимают padding блочные элементы. Для
<li> был применен
display: block - Error sit volup tatem
- Error sit volup tatem
Чтоб понять почему это случилось нужно смотреть на то как воспримнимают свойства (width, height, padding, margin)
блочные и inline элементы.
Блочные элементы
Спецификация W3C CSS2 определяет блочные элементы, как
элементы, которые отформатированы визуально как блоки. Другими словами блочные элементы характерны переносом на новую строку перед и после элемента. К блочным элементам относятся: параграфы (<p>), контейнеры (<H...>), заголовки (<div>).
Inline элементы
Спецификация W3C CSS2 определяет inline элементы, как элементы, которые не являются блоками и отформатированы визуально строкой. Другими словами, inline элементы не характерны переносом на новую строку перед и после элемента.
Измерение - основное отличие между блочными и inline элементами
Если Вы попытаетсь добавить измерение для inline элементов, то некоторые из них будут работать, некоторые будут работать частично, а некоторые будут полностью игнорироватся. К таким свойствам относятся
width, height, padding, margin. В случае с блочными элементами, то вышеперечисленные свойства корректно в
блочных элементах.
Ширина inline элементов.
Согласно спецификации W3C CSS2 ширина для inline элементов не применяется. В примере видно, что установленная ширина (
width:100px;) для inline элемента
<a> полностью игнорируется всеми браузерами.
Sit voluptatem assusantium
doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
Высота inline элементов.
Согласно спецификации W3C CSS2 высота для inline элементов не применияется. В примере видно, что установленная высота (
width:50px;) для inline элемента
<a> полностью игнорируется всеми браузерами и равна высоте строки установленной с помощью свойства line-height.
Sit voluptatem assusantium
doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
Свойство padding для inline элементов.
Свойство padding может быть добавленно для всех сторон inline элемента но работать будет только для боковых сторон. Вертикальные отступы хоть и добавляются но место под них не выделяется и элемент налазит на другие элементы. В примере ниже определено свойство padding (
padding:50px;) для тега
<a> Sit voluptatem assusantium
doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
Свойство margin для inline элементов.
Свойство margin может быть добавленно для всех сторон inline элемента но работать будет только для боковых сторон. В примере ниже определено свойство margin (
margin:50px;) для тега
<a> Sit voluptatem assusantium
doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
Изменение свойства display для inline элементов.
Для inline элементов возможно изменить
свойство display, что присвоит элементу все свойства присущие для блочных элементов. В следствии чего станут возможными для применения свойства (width, height, padding, margin), также как и для блочных элементов.
В примере ниже мы устанавливаем
display:block; для тега
<a> и он получает все свойства присущие для блочных элементов, что позволяет расширить возможности этого тега.
Sit voluptatem assusantium
doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
Изменение свойства display для блочных элементов.
Также возможно изменить изменить свойство display, что присвоит блочному элементу свойства inline элементов.
Выводы к статье об inline элементах:
- inline элементы отображаются в виде части строки, в которой расположены
- Для inline элементов на работают свойства (width, height, padding-top, padding-bottom, margin-top, margin-bottom)
- блочные элементы отображаются на новой строке
- Для блочных элементов применимы и корректно работают свойства (width, height, padding, margin)
оригинал статьи
Добавить комментарий
