CSS-свойства inline и inline-block
Development | Комментировать запись
Свойство display: inline-block предоставило новый способ создания блоков: теперь вы можете разместить рядом друг с другом блоки, которые должным образом сворачиваются в зависимости от доступного места в содержащем элементе. Это упрощает создание макетов, которые ранее можно было реализовать только с помощью float.
Основное отличие данного свойства по сравнению с display: inline заключается в том, что inline-block позволяет установить ширину и высоту элемента. Кроме того, свойство display: inline не учитывает верхние и нижние поля и отступы, в то время как display: inline-block учитывает их.
Читайте также: Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов
Разница между display: inline-block и display: block заключается также в том, что display: block разрывает строки после элемента, поэтому блочный элемент не находится рядом с другими элементами. Давайте рассмотрим несколько примеров:
Свойство display: inline
Как мы уже говорили выше, ширина и высота не соблюдаются этим свойством, а отступы сверху и снизу присутствуют, но перекрывают линии сверху и снизу.
span.box { display: inline; /* the default for span */ width: 100px; height: 160px; padding: 18px; }
Свойство display: inline-block
Здесь соблюдаются ширина, высота и отступы, и при этом обе копии элемента могут располагаться рядом.
Примечание: Проверить поддержку этого свойства браузерами вы можете по этой ссылке.
span.box { display: inline-block; width: 100px; height: 160px; padding: 18px; }
Свойство display: block
В данном случае все снова учитывается, но элементы не располагаются рядом.
span.box { display: block; width: 100px; height: 160px; padding: 18px; }Tags: CSS