При создании веб-страниц разработчик постоянно работает с HTML-элементами. Одни элементы располагаются друг под другом, другие — выстраиваются в одну строку. Такое поведение определяется CSS-свойством display.

Свойство display является одним из самых важных в CSS, поскольку именно оно определяет, как элемент отображается на странице и каким образом взаимодействует с другими элементами.

Наиболее часто используются три значения:

• block
• inline
• inline-block

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

Синтаксис свойства

Общий синтаксис выглядит следующим образом:

selector {
    display: значение;
}

Например:

div {
    display: block;
}

или

span {
    display: inline;
}

Значение display: block

Блочные элементы занимают всю доступную ширину контейнера, даже если содержимое занимает всего несколько символов.

Каждый новый блочный элемент автоматически начинается с новой строки.

Особенности

• Начинается с новой строки;
• Занимает всю доступную ширину;
• Можно задавать: width, height, margin, padding.

Примеры блочных элементов:

<div>
<p>
<h1>–<h6>
<section>
<article>
<header>
<footer>

Пример HTML:

<div class="box">Первый блок</div>
<div class="box">Второй блок</div>
<div class="box">Третий блок</div>

Пример CSS:

.box {
    display: block;
    width: 250px;
    padding: 20px;
    margin: 10px 0;
    background: lightblue;
    border: 2px solid steelblue;
}

В результате элементы будут расположены друг под другом:

+-------------------------+
| Первый блок             |
+-------------------------+

+-------------------------+
| Второй блок             |
+-------------------------+

+-------------------------+
| Третий блок             |
+-------------------------+

Значение display: inline

Строчные элементы располагаются в одной строке, пока хватает места.

Они занимают только ширину своего содержимого.

Особенности

• Располагаются в одной строке;
• Занимают только необходимое место;
• Нельзя задать: width, height;
• Работают горизонтальные отступы (margin-left, margin-right), а вертикальные могут вести себя ограниченно.

Примеры строчных элементов:

<span>
<a>
<strong>
<em>
<b>
<i>

Пример HTML:

<span class="item">HTML</span>
<span class="item">CSS</span>
<span class="item">JavaScript</span>

Пример CSS:

.item {
    display: inline;
    background: gold;
    padding: 10px;
}

В результате все элементы окажутся в одной строке:

HTML CSS JavaScript

Если места станет недостаточно, они автоматически перенесутся на следующую строку.

Значение display: inline-block

inline-block объединяет преимущества двух предыдущих вариантов.

Элемент:

• Располагается в строке;
• Можно задавать ширину;
• Можно задавать высоту;
• Работают все внешние и внутренние отступы.

Именно поэтому inline-block долгое время был одним из основных способов создания горизонтальных меню и карточек товаров до появления Flexbox.

Особенности:

• Располагается в строку;
• Можно задавать размеры;
• Можно использовать margin;
• Можно использовать padding;
• Занимает только необходимое место.

Пример HTML:

<div class="card">HTML</div>
<div class="card">CSS</div>
<div class="card">JavaScript</div>

Пример CSS:

.card {
    display: inline-block;
    width: 150px;
    height: 80px;
    margin: 10px;
    background: lightgreen;
    border: 2px solid green;
    text-align: center;
    line-height: 80px;
}

Результат:

+---------+ +---------+ +----------+
| HTML    | |   CSS   | |JavaScript|
+---------+ +---------+ +----------+

Карточки будут находиться в одной строке, но при этом каждая сохранит собственные размеры.

Сравнение block, inline и inline-block

Заключение

Свойство display определяет способ отображения HTML-элементов и является фундаментальной частью CSS.

Основные значения имеют разные задачи:

• display: block — элемент занимает всю доступную ширину и начинается с новой строки.
• display: inline — элемент располагается внутри строки и занимает только необходимое место, но его размеры ограничены.
• display: inline-block — сочетает преимущества обоих подходов: элементы находятся в одной строке и при этом поддерживают задание ширины, высоты и всех отступов.

Хотя современные макеты чаще строятся с помощью display: flex и display: grid, понимание работы block, inline и inline-block остаётся обязательной базой для каждого веб-разработчика. Именно знание этих режимов отображения помогает лучше понимать поведение HTML-элементов и уверенно создавать адаптивные и удобные интерфейсы.