Коротко: свойство display определяет, как элемент ведёт себя в потоке страницы: block занимает всю ширину, inline идёт в строке, inline-block совмещает оба, flex и grid включают современные раскладки, а none полностью скрывает элемент.
display — основа вёрстки. Почти любая проблема «элемент не туда встал» или «не применился размер» решается сменой типа отображения.Основные значения
| Значение | Поведение |
|---|---|
block |
на всю ширину, с новой строки |
inline |
в строке, размеры не работают |
inline-block |
в строке, но размеры работают |
flex |
гибкая раскладка в линию |
grid |
сеточная раскладка |
none |
элемент скрыт |
Примеры
a.btn {
display: inline-block;
padding: 12px 20px; /* размеры теперь работают */
}
.menu {
display: flex;
gap: 16px;
}
.hidden { display: none; }Строчные ссылки не принимают padding по вертикали — inline-block решает проблему и превращает ссылку в кнопку.
Вкладки: сравнение
Строчный элемент занимает столько места, сколько содержимое. Ширина, высота и вертикальные отступы игнорируются — частая причина неработающих размеров.
.tag {
display: inline-block;
padding: 6px 12px;
}Гибрид: элементы идут в строке, но принимают размеры и отступы. Классический приём для кнопок и ярлыков.
display: none полностью убирает элемент из потока: место не занимается. Это отличается от visibility: hidden, где элемент невидим, но место сохраняется.
width и height, проверьте его display: у строчных элементов размеры не работают. Решение — block или inline-block.Практика: выбрать display
- Определите, элемент должен идти блоком или в строке.
- Блоком —
block. - В строке без размеров —
inline. - В строке с размерами —
inline-block. - Для раскладки —
flexилиgrid. - Для скрытия —
none.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Размеры не работают | display: inline |
сменить на block/inline-block |
| Ссылки слиплись | строчные | inline-block + отступы |
| Элемент пропал | display: none |
проверить значение |
| Не работает flex | не задан display: flex |
добавить свойство |
| Место остаётся | visibility: hidden |
использовать display: none |
Проверьте себя
Вопросы и ответы
display: none убирает элемент из потока совсем — место не занимается. visibility: hidden делает его невидимым, но место остаётся.
Ссылка по умолчанию строчная, а у строчных элементов вертикальные отступы не влияют на раскладку. Задайте display: inline-block.
Нет, div — блочный по умолчанию. Явно указывать display нужно только когда поведение по умолчанию не подходит.
Flex — для раскладки в одну линию и распределения элементов, grid — для двумерных сеток с колонками и рядами. Оба задаются через display.
Итоги
displayзадаёт поведение элемента в потоке.block— на всю ширину,inline— в строке.inline-blockдаёт размеры строчным элементам.noneубирает элемент, аflexиgridвключают раскладки.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.