Блокові, інлайнові та інлайново-блокові елементи в HTML та CSS

HTML та CSS~3 хв читання

display: block, display: inline та display: inline-block визначають, як елементи займають місце і рухаються в потоці документа.

Теорія

Коротко

Block - як оголошення на всю сторінку: займає весь рядок, стекується вертикально, поважає всі box model властивості.
Inline - як слово в реченні: тече горизонтально, ігнорує width/height, працюють тільки ліві та праві margin.
Inline-block - як зображення в тексті: тече в рядку, але поважає width, height і всі margin.
Головна різниця: block примушує перенос рядка і повну ширину; inline ігнорує розміри; inline-block дозволяє і те, і інше.
Правило вибору: block для секцій layout, inline для стилізації тексту, inline-block для кнопок або іконок в рядку.

Швидкий приклад

html

<style>
  .block     { display: block;        background: lightblue;  padding: 10px; margin: 10px; }
  .inline    { display: inline;       background: lightgreen; padding: 10px; margin: 10px; }
  .inl-block { display: inline-block; background: lightcoral; padding: 10px; margin: 10px; width: 120px; height: 50px; }
</style>

<!-- Стекується вертикально, повна ширина -->
<div class="block">Block 1</div>
<div class="block">Block 2 (нижче)</div>

<!-- Розташовується поряд, ігнорує width/height -->
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>

<!-- Розташовується поряд, поважає розміри -->
<span class="inl-block">Inline-block 1</span>
<span class="inl-block">Inline-block 2</span>

Block-елементи стекуються. Inline-елементи стоять поряд, але не приймають width чи height. Inline-block стоїть поряд і приймає розміри.

Block примушує перенос рядка до і після себе, а потім розтягується на всю ширину контейнера. Саме тому <div> займає весь рядок навіть якщо в ньому одне слово. Inline вливається в текстовий потік, як слово в реченні: без переносу рядка, без реакції на width чи height. Inline-block - середній варіант. Лишається в потоці рядка, але створює блок з розмірами. Тому кнопки зазвичай так і роблять.

Коли що використовувати

Потрібно стекувати вертикально і заповнити ширину? Block. Секції, заголовки, контейнери статей.
Стилізуєш частину речення або обертаєш посилання всередині тексту? Inline. <span>, <a>, <em>.
Кнопка, бейдж або таб навігації з padding і розміром, які мають стояти поряд? Inline-block.
Не встановлюй width чи height на inline-елементи - вони не матимуть ефекту.

Таблиця порівняння

Властивість	block	inline	inline-block
Новий рядок	Так	Ні	Ні
`width` / `height`	Так	Ні	Так
Margin (всі сторони)	Так	Тільки ліво/право	Так
Padding (всі сторони)	Так	Тільки ліво/право	Так
Повна ширина за замовчуванням	Так	Ні	Ні
Коли використовувати	Секції, контейнери	Стилізація тексту	Кнопки, бейджі, таби

Типові помилки

Встановлення width/height на inline-елементи:

css

span { display: inline; width: 200px; height: 100px; } /* обидва ігноруються */

Браузер ігнорує ці властивості для inline-елементів. Якщо потрібен розмір - переключи на inline-block.

Очікування вертикальних margin на inline-елементах:

html

<span style="margin-top: 20px;">Текст</span>

Вертикальні margin на inline-елементах не впливають на layout. Працюють тільки margin-left і margin-right. Використовуй inline-block або додай vertical-align.

Пробіл між inline-block елементами:

html

<span style="display: inline-block; width: 100px;">A</span>
<span style="display: inline-block; width: 100px;">B</span>

Перенос рядка між тегами рендериться як ~4px пробіл. Я бачив, як це руйнувало nav-меню не один раз. Виправлення: встановити font-size: 0 на батьківський елемент, або прибрати весь пробіл між закриваючим і відкриваючим тегами.

Де зустрічається в реальних проєктах

Bootstrap btn-group використовує inline-block для кнопок в рядку (v5.3+).
Таби навігації GitHub - це inline-block-посилання з padding і бордерами.
Утиліта inline-block в Tailwind з'являється в компонентах кнопок і бейджів.
Компонент Chip у Material UI за замовчуванням використовує inline-flex - для потоку поводиться так само.

Питання на співбесіді

Q: Яке значення display за замовчуванням у <img>?
A: Inline. Зображення - це замінені елементи (replaced elements), які течуть як текстові символи, але зберігають власні розміри. Тому під зображеннями всередині контейнерів часто є невеликий пробіл - це вирівнювання по базовій лінії, а не баг.

Q: Що відбувається з inline-block дочірніми елементами всередині flex-контейнера?
A: Flex formatting context бере верх. display: flex на батьківському елементі перевизначає inline-потік дочірніх елементів. Але width і height, які ти задав на дочірніх елементах, продовжують працювати.

Q: Чому vertical-align працює тільки для inline і inline-block?
A: Вона вирівнює елементи в межах рядкових боксів (line boxes). Block-елементи створюють власні рядки і не мають line box для вирівнювання.

Q: (Senior) Якщо встановити display: block на grid-елемент, чи вплине це на grid layout?
A: Ні. Grid-елементи ігнорують власну властивість display для позиціювання, бо grid formatting context бере верх. Але зміна впливає на внутрішній контекст форматування: дочірні елементи цього grid-айтема тепер течуть як block. Якщо згадати концепцію containing block - інтерв'юер це помітить.

Приклади

Навігаційна панель з inline-block табами

html

<nav style="background: #f6f8fa; padding: 1rem;">
  <a href="#" style="display: inline-block; padding: 0.5rem 1rem; margin-right: 0.5rem;
     background: white; border: 1px solid #ddd; text-decoration: none;">Code</a>
  <a href="#" style="display: inline-block; padding: 0.5rem 1rem; margin-right: 0.5rem;
     background: white; border: 1px solid #ddd; text-decoration: none;">Issues</a>
  <a href="#" style="display: inline-block; padding: 0.5rem 1rem;
     background: white; border: 1px solid #ddd; text-decoration: none;">Pull requests</a>
</nav>

Кожне посилання потребує padding і бордер, але всі мають стояти в одному рядку. Чистий inline ігноруватиме padding у layout; block поставить кожне посилання на окремий рядок. inline-block дає кожному посиланню правильний блок з розміром і водночас тримає їх поряд. Цей патерн - основа навігації GitHub.

Аватар користувача з іменем

html

<style>
  .avatar-wrap {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }
  .avatar-wrap img {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .username {
    display: inline;
    font-weight: bold;
  }
</style>

<span class="avatar-wrap">
  <img src="avatar.png" alt="Аватар користувача">
</span>
<span class="username">john_doe</span>

Обгортка зображення - inline-block, щоб мати фіксований розмір і vertical-align: middle для вирівнювання з текстом поряд. Ім'я користувача - звичайний inline, бо розміри йому не потрібні, воно просто тече як текст.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?