etxt banner 468x60etxt banner 728x90etxt banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

CSS-свойство display указывает тип элемента. Каждый тип устанавливает некие правила для взаимодействия с другими элементами и своего содержимого.

Значение по умолчанию:inline
Применяется к:Все элементы
Наследование:Нет
Анимирование:Нет. Анимируемые свойства
Версия:CSS 1, 2, 3
  • Если значение display не указано явно, для абсолютно-позиционированных и floated элементов оно вычисляется самостоятельно.
  • Если для свойства display установлено значение none — элемент вообще не создает никаких блоков и не влияет на макет; элемент и его содержимое полностью удаляются из структуры и документ отображается так, будто бы элемент никогда не существовал в дереве документа.

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit

Примеры написания кода свойства display:

div {
    display: inline;
}
span {
    display: block;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

ЗначениеОписание
inlineУстанавливает свойства строчного элемента.
blockThe element generates a блочного элемента.
contentsДля самого элемента не устанавливается специфических свойств, но для потомков и псевдо-элементы устанавливаются поля (boxes) и текст работает как обычно.
flexУстанавливает свойства flex-содержимого для элемента.
flowЭлемент устанавливает свое содержимое, используя макет потока (линейно-блочный макет).
flow-rootЭлемент генерирует блок-контейнер box, и выкладывает его содержимое, используя макет потока.
gridУстанавливает свойства grid-сетки для элемента.
inline-blockУстанавливает свойства блочного элемента, который обтекается другими элементами подобно встроенному элементу.
inline-flexУстанавливает свойства flex-содержимого для элемента, но он обтекается другими элементами подобно встроенному элементу.
inline-gridУстанавливает свойства grid-сетки для элемента, но он обтекается другими элементами подобно встроенному элементу.
inline-tableУстанавливает свойства тега table для элемента, но он обтекается другими элементами подобно встроенному элементу.
list-itemУстанавливает свойства блочного элемента и добавляется маркер списка.
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Отключить отображение элемента. У всех дочерних элементов также отключено отображение, даже если их свойство display установлено не none.
initialУстанавливает это свойство в значение по умолчанию.
inheritЕсли указан, связанный элемент принимает вычисленное значение своего родительского элемента display.

Поддержка браузеров

Свойство display поддерживается во всех основных браузерах.

  • Такие значения, как contents, flow-root, run-in и т. д., плохо поддерживаются в большинстве браузеров. Вы должны стараться избегать их использования в настоящее время.
  • Вообще, список возможных значений этого свойства которые поддерживаются всем браузерами очень короткий — block, inline, list-item и none. Все остальные значения поддерживаются браузерами выборочно.
flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента