display

Пример

Использование некоторых различных отображаемых значений:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Определение display

CSS свойство display определяет поведение отображения (тип окна рендеринга) элемента.

Значение по умолчанию:	inline
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS1
JavaScript синтаксис:	object.style.display="none" Попробуй

Поддержка display

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
display	4.0	8.0	3.0	3.1	7.0

Примечание: Для работы значений "flex" и "inline-flex" требуется префикс -webkit- для работы в Safari предыдущей версии 9.

Примечание: "display: contents" не работает в Edge предыдущей версии 79.

Синтаксис display

display: value;

Значения display

Значение	Описание	Демонстрация
inline	Отображает элемент как встроенный элемент (например, <span>). Любые свойства высоты и ширины не будут иметь никакого эффекта. Это значение по умолчанию.	Демо ❯
block	Отображает элемент в виде блочного элемента (например, <p>). Он начинается с новой строки и занимает всю ширину	Демо ❯
contents	Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемента следующего уровня в DOM	Демо ❯
flex	Отображает элемент в виде гибкого контейнера блочного уровня	Демо ❯
grid	Отображает элемент в виде контейнера сетки на уровне блоков	Демо ❯
inline-block	Отображает элемент как блок-контейнер встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины	Демо ❯
inline-flex	Отображает элемент в виде гибкого контейнера встроенного уровня	Демо ❯
inline-grid	Отображает элемент в виде контейнера сетки встроенного уровня	Демо ❯
inline-table	Элемент отображается в виде таблицы встроенного уровня	Демо ❯
list-item	Пусть элемент ведет себя как элемент <li>	Демо ❯
run-in	Отображает элемент либо черным, либо встроенным, в зависимости от контекста	Демо ❯
table	Пусть элемент ведет себя как элемент <table>	Демо ❯
table-caption	Пусть элемент ведет себя как элемент <caption>
table-column-group	Пусть элемент ведет себя как элемент <colgroup>
table-header-group	Пусть элемент ведет себя как элемент <thead>
table-footer-group	Пусть элемент ведет себя как элемент <tfoot>
table-row-group	Пусть элемент ведет себя как элемент <tbody>
table-cell	Пусть элемент ведет себя как элемент <td>
table-column	Пусть элемент ведет себя как элемент <col>
table-row	Пусть элемент ведет себя как элемент <tr>
none	Элемент полностью удален	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры display

Пример

Демонстрация того, как использовать значение свойства contents. В следующем примере контейнер .a исчезнет, а дочерние элементы (.b) станут дочерними элементами элемента следующего уровня в DOM:

.a {
display: contents;
border: 2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}

.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}

Попробуйте сами »

Пример

Демонстрация того, как использовать значение свойства inherit:

body {
display: inline;
}

p {
display: inherit;
}

Попробуйте сами »

Пример

Установить направление некоторых гибких элементов внутри элемента <div> в обратном порядке:

div {
display: flex;
flex-direction: row-reverse;
}

Попробуйте сами »