Блокові, інлайнові та інлайново-блокові елементи в HTML та CSS
Типи відображення в CSS
Кожен HTML-елемент має поведінку за замовчуванням display. Розуміння різниці між block, inline та inline-block є основоположним для макету CSS.
Блокові елементи
Блокові елементи займають всю доступну ширину і починаються з нового рядка.
<div>Я є блоковим елементом</div>
<p>Я також є блоковим елементом</p>
<h1>І я також</h1>Характеристики:
- За замовчуванням займає всю доступну ширину
- Починається з нового рядка
- Підпорядковується ширині, висоті, відступам та полям в усіх напрямках
- Загальні блокові елементи:
<div>,<p>,<h1>-<h6>,<section>,<article>,<ul>,<li>,<form>
Інлайн-елементи
Інлайн-елементи займають лише стільки ширини, скільки їхній вміст і не починаються з нового рядка.
<p>Це <span>інлайн</span> текст з <a href="#">посиланням</a>.</p>Характеристики:
- Не починається з нового рядка
- Властивості ширини та висоти ігноруються
- Вертикальні відступи та поля ігноруються (горизонтальні працюють)
- Загальні інлайн-елементи:
<span>,<a>,<strong>,<em>,<img>,<code>
Інлайн-блокові елементи
Інлайн-блок є гібридом: він тече в рядку (як inline), але приймає стилізацію блочного рівня (як block).
.badge {
display: inline-block;
width: 100px;
height: 40px;
padding: 8px 16px;
margin: 4px;
background: #007bff;
color: white;
text-align: center;
}Характеристики:
- Не починається з нового рядка
- Підпорядковується ширині, висоті, відступам та полям в усіх напрямках
- Знаходиться в потоці тексту поряд з іншими інлайн/інлайн-блоковими елементами
Таблиця порівняння
| Особливість | block | inline | inline-block |
|---|---|---|---|
| Новий рядок | Так | Ні | Ні |
| Ширина/Висота | Так | Ні | Так |
| Вертикальний відступ | Так | Ні | Так |
| Вертикальне поле | Так | Лише візуально | Так |
| Повна ширина за замовчуванням | Так | Ні | Ні |
Зміна типу відображення
Тип відображення будь-якого елемента можна змінити за допомогою CSS:
/* Зробити span блоком */
span.block { display: block; }
/* Зробити div інлайн-елементом */
div.inline { display: inline; }
/* Зробити посилання інлайн-блоком */
a.button { display: inline-block; padding: 10px 20px; }Важливо:
Розуміння цих трьох типів відображення є суттєвим для контролю макету. У сучасному CSS, flexbox та grid додають нові контексти відображення, але block/inline/inline-block залишаються основою.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.