CSS-свойства inline и inline-block

Свойство 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:

Добавить комментарий