Энциклопедия CSS:display

Введение в CSS

Энциклопедия CSS:display Тематические порталы Портал CSS • Портал Веб-разработчиков

Разобраться с CSS-свойством display бывает непросто, поскольку оно обладает огромным количеством возможных значений, каждое из которых влияет на поведение и отображение элемента. Это свойство отвечает за то, как элемент ведёт себя в документе: будет ли он блочным, строчным, гибким, сеточным или вовсе невидимым.

Список доступных значений свойства display

Вот список доступных значений для свойства display:

• display: -webkit-box — устаревшее значение для создания блочной раскладки в Webkit-браузерах.
• display: -webkit-inline-box — аналогичное значение для строчной раскладки в Webkit-браузерах.
• display: block — элемент становится блочным, занимает всю ширину родителя.
• display: contents — элемент сам по себе исчезает, но его дочерние элементы остаются в DOM.
• display: flex — элемент становится контейнером гибкой раскладки (flexbox).
• display: flow — устанавливает потоковое поведение по умолчанию (основное значение для большинства элементов).
• display: flow-root — создаёт новый корень потока, как если бы элемент был блочным форматирующим контекстом.
• display: grid — элемент становится контейнером сеточной раскладки (grid).
• display: inherit — унаследует значение свойства display от родителя.
• display: initial — сбрасывает значение свойства display к его начальному значению.
• display: inline — элемент становится строчным, занимая только необходимую ширину.
• display: inline-block — элемент сочетает поведение строчного и блочного (может иметь размеры, но остаётся в строке).
• display: inline-flex — элемент становится строчным контейнером для flexbox.
• display: inline-grid — элемент становится строчным контейнером для grid.
• display: inline-masonry — экспериментальное значение для строчной сетки с динамической раскладкой.
• display: inline-table — элемент ведёт себя как строчная таблица.
• display: list-item — элемент становится элементом списка с маркером (как у <li>).
• display: masonry — экспериментальное значение для сетки с динамической раскладкой.
• display: math — экспериментальное значение для математической разметки.
• display: none — элемент скрывается из визуального отображения и не занимает места в документе.
• display: revert — сбрасывает значение свойства display к стилям браузера.
• display: revert-layer — экспериментальное значение для сброса стилей в конкретных слоях.
• display: ruby — элемент ведёт себя как контейнер руби-аннотаций (используется для языков, требующих фуриганы).
• display: ruby-text — элемент ведёт себя как текст руби (фуригана).
• display: table — элемент ведёт себя как блочная таблица.
• display: table-caption — элемент ведёт себя как заголовок таблицы.
• display: table-cell — элемент ведёт себя как ячейка таблицы.
• display: table-column — элемент ведёт себя как столбец таблицы.
• display: table-column-group — элемент ведёт себя как группа столбцов таблицы.
• display: table-footer-group — элемент ведёт себя как группа строк футера таблицы.
• display: table-header-group — элемент ведёт себя как группа строк заголовка таблицы.
• display: table-row — элемент ведёт себя как строка таблицы.
• display: table-row-group — элемент ведёт себя как группа строк таблицы.
• display: unset — удаляет установленное значение, возвращая свойство к начальному или унаследованному состоянию.

Каждое из этих значений имеет своё предназначение, что позволяет гибко управлять разметкой веб-страницы. Однако из-за такого разнообразия часто бывает сложно выбрать подходящее значение для конкретного случая, а неправильный выбор может привести к неожиданным результатам.

В отдельных статьях мы подробно разберём каждое из значений свойства display, узнаем, как и когда их следует использовать, а также разберёмся в совместимости с браузерами.