CSS свойство display

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

CSS свойство display определяет как должен отображаться определенный элемент HTML.

Три span с текстом «Один», «Два», «Три». Всем заданы width: 180px и height: 40px. При block каждый начинается с новой строки. При inline размеры не применяются, ширина зависит от текста. При inline-block размеры применяются, третий элемент целиком переносится на следующую строку контейнера шириной 400px.
Одинаковые span в контейнере шириной 400px: сравнение трёх значений display при заданных width и height.

Попробуйте значения display

Сравните положение выделенного элемента между соседними фрагментами. Для inline ширина и высота не действуют; none убирает элемент вместе с занимаемым местом.

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

display: block

HTML и CSS примера
HTML
<div class="stage">До <span class="demo-target">Блок</span> после</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  width: 120px;
  height: 80px;
  display: block;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

Поддержка браузерами

Спецификации: CSS display, svgwg

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (13) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.display
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
display✓1✓12✓1✓7✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
block✓1✓12✓1✓7✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
contents✓65✓79✓37✓52✓11.1✓65✓37✓47✓11.3✓9.0✓65✓11.3
Specific behavior of unusual elements when display: contents is applied to them✓65✓79✓59✓52×✓65✓59✓47×✓9.0✓65×
Elements with display: contents are focusable××××××××××××
flex✓29✓12✓20✓16✓9✓29✓20✓16✓9✓2.0✓4.4✓9
flow-root✓58✓79✓53✓45✓13✓58✓53✓43✓13✓7.0✓58✓13
grid✓57✓16✓52✓44✓10.1✓57✓52✓43✓10.3✓6.0✓57✓10.3
grid-lanes××××✓26.4×××✓26.4××✓26.4
inline✓1✓12✓1✓7✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
inline-block✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
inline-flex✓29✓12✓20✓16✓9✓29✓20✓16✓9✓2.0✓4.4✓9
inline-grid✓57✓16✓52✓44✓10.1✓57✓52✓43✓10.3✓6.0✓57✓10.3
inline-grid-lanes××××✓26.4×××✓26.4××✓26.4
inline-table✓1✓12✓3✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
@keyframe animatable and transitionable (given transition-behavior: allow-discrete)✓117✓117×✓103✓18✓117×✓78✓18✓24.0✓117✓18
list-item✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
legend-support✓71✓79✓64✓58×✓71✓64✓50×✓10.0✓71×
math✓109✓109×✓95×✓109×✓74×✓21.0✓109×
Multi-keyword values✓115✓115✓70✓101✓15✓115✓79✓77✓15✓23.0✓115✓15
none✓1✓12✓1✓7✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
Setting display: none on an &lt;option&gt; element hides it from the dropdown.✓1✓79✓1✓15×✓18✓4✓14×✓1.0✓4.4×
ruby✓121✓121✓38✓107×✓121✓38✓81×✓25.0✓121×
ruby-base××✓38×××✓38×××××
ruby-base-container××✓38×××✓38×××××
ruby-text✓121✓121✓38✓107×✓121✓38✓81×✓25.0✓121×
ruby-text-container××✓38×××✓38×××××
table✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
table-caption✓1✓12✓1✓15✓≤4✓18✓4✓14✓≤3.2✓1.0✓4.4✓≤3.2
table-cell✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
table-column✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
table-column-group✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
table-footer-group✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
table-header-group✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
table-row✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1
table-row-group✓1✓12✓1✓7✓1✓18✓4✓14✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>;

/* Глобальные значения */
display: initial | inherit | unset | revert | revert-layer;

|| — одно или несколько значений в любом порядке; | — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон.

JavaScript синтаксис:

JavaScript
element.style.display = "block";

Начальное значение свойства

inline.

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

Значения display
Значение Описание
inline Элемент отображается как строчный (inline) элемент (например - <span>). Начальное значение.
block Отображает элемент как блочный элемент (например - <h1> ).
flex Элемент отображается как блочный flex-контейнер.
grid Элемент отображается как блочный grid-контейнер.
inline-block "Блочно-строчные" элементы - позволяет задавать размеры, рамки, отступы, как и блочным элементам, ширина зависит от содержания (не растягивается на всю ширину контейнера), выравниваются вертикально как и строчные элементы.
inline-flex Элемент отображается как строчный flex-контейнер.
inline-grid Элемент отображается как строчный grid-контейнер.
inline-table Определяет, что элемент является таблицей, но при этом встраивается в другие элементы, а не является блочной таблицей (элемент обтекает другими элементами).
list-item Элемент ведет себя как элемент списка - <li>.
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 Элемент не будет отображаться в документе (под него не резервируется место на странице).
flow-root Создаёт самостоятельный контекст форматирования блоков: удерживает плавающих потомков, не допускает схлопывания отступов контейнера с потомками. Отступы соседних обычных блоков внутри него по-прежнему могут схлопываться.
contents Элемент не создаёт собственного бокса; его потомки отображаются так, как будто являются потомками родителя.
block flex, inline flex, block grid, inline grid и другие пары

Запись из двух ключевых слов, разделённых пробелом:

  • Первое слово определяет, как сам элемент располагается среди соседей: block — как блок, inline — внутри строки. Это внешний тип отображения.
  • Второе слово определяет, как располагается содержимое элемента: flow — обычная раскладка, flow-root — обычная раскладка с отдельным контекстом форматирования блоков, flex — Flexbox, grid — сетка, table — таблица. Это внутренний тип отображения.

Например, display: inline flex размещает сам контейнер внутри строки, а его дочерние элементы — по правилам Flexbox. Это то же самое, что display: inline-flex. Запись block flex соответствует flex, а inline grid — inline-grid.

initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства display устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Display — спецификация display.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений. При переходе из none элемент становится видимым в начале, при переходе в none скрывается в конце. Для CSS-перехода нужен transition-behavior: allow-discrete.

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

Участие элемента в раскладке

Средний блок не занимает места при display: none. Замените none на block, затем измените display родителя с flex на block.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Участие элемента в раскладке</title>
  </head>
  <body>
    <div class="row">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.row {
    display: flex;
    gap: 8px;
}
.target {
    display: none;
}

Строчные и строчно-блочные элементы

В A ширина не применяется к обычному inline-элементу. В B inline-block учитывает ширину. Замените inline-block на block и сравните перенос строк.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
.sample {
    background: #c5dbea;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Строчные и строчно-блочные элементы</title>
  </head>
  <body>
    <p>Текст <span class="sample first">Вариант A</span> после блока.</p>
    <p>Текст <span class="sample second">Вариант B</span> после блока.</p>
  </body>
</html>
style.css
CSS
.sample {
    width: 140px;
    padding: 4px;
}
.first {
    display: inline;
}
.second {
    display: inline-block;
}