Урок 16. Справочник: display и поток документа
⚡ Кратко
Смотрите не только на запись свойства, но и на то, как оно влияет на поток и размер элемента.
display: block— новая строка, полная ширина.display: inline— в строку, без размеров.display: inline-block— в строку, с размерами.display: flex— гибкий контейнер.display: none/visibility: hidden— скрыть без места / с местом.
Ключевые конструкции
| Конструкция | Назначение | В строке? | Размеры? |
|---|---|---|---|
display: block | Отдельная строка, доступная ширина. | Нет | Да |
display: inline | Остаётся внутри строки текста. | Да | Нет |
display: inline-block | Строчное поведение с управляемыми размерами. | Да | Да |
display: flex | Гибкий контейнер, распределяющий детей. | — | Да |
display: none | Не занимает места и недоступен пользователю. | — | — |
visibility: hidden | Невидим, но место в раскладке сохраняется. | — | — |
| flow layout | Обычная раскладка без flex/grid/position. | — | — |
Шпаргалка-память: значения по умолчанию
Многие теги уже имеют свой
display: div, p, section, h1–h6, ul — block;
span, a, strong, em, img — inline (img — inline-замещаемый). Свойство display лишь переопределяет это поведение.