Свойство display: модель отображения
Чем отличаются block, inline, flex и grid и что происходит при display: none.
Как это работает
display определяет, как элемент участвует в раскладке и как размещает своих детей. Блочный элемент обычно начинает новую строку, строчный участвует в строке текста. Значения flex и grid превращают элемент в контейнер с собственной моделью расположения прямых потомков.
Выбор display не меняет HTML-смысл элемента. Ссылка с display: block остаётся ссылкой, а div с display: inline — обычным контейнером. Начните с семантической разметки, затем выберите раскладку, которая решает визуальную задачу.
Пример в интерфейсе
.items { display: flex; gap: 12px; }
.items > div { padding: 16px; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| block | Блочная раскладка с новой строкой. |
| inline | Участие в строке текста. |
| flex / grid | Раскладка прямых дочерних элементов. |
| none | Исключение элемента из раскладки и обычно дерева доступности. |
На что обратить внимание
Не используйте display: none для текста, который должен оставаться доступным читателю экрана. Скрытие из раскладки обычно скрывает его и от вспомогательных технологий.
Проверьте на практике
Замените flex на grid, затем на block. Сравните положение карточек и сохраните тот вариант, который соответствует задаче.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.