W3docs
ru
Войти

Свойство CSS display

Свойство CSS display определяет тип отображения элемента. Изучите все значения и попробуйте примеры.

Свойство display — одно из важнейших CSS-свойств для управления макетом. Оно определяет тип блока отображения, который генерирует HTML-элемент: располагается ли он на отдельной строке, встраивается в текст, становится flex- или grid-контейнером или вовсе исчезает.

В этой главе рассматривается, что делает каждое значение display, в чём разница между внешним отображением (как блок взаимодействует с соседними элементами) и внутренним (как располагаются его дочерние элементы), наиболее частые ошибки и примеры с живым кодом для каждого ключевого значения.

Почему свойство display важно

Каждый элемент имеет значение display по умолчанию, заданное пользовательской таблицей стилей браузера: <div> и <p> по умолчанию имеют block, <span> и <a> — inline, <li> — list-item и т. д. С помощью display можно переопределить это умолчание. Например, блочный элемент можно превратить в строчный, задав display: inline, а список ссылок — в горизонтальную панель навигации.

Два дополнительных замечания об умолчаниях:

  • В HTML начальное значение display элемента определяется спецификацией HTML или таблицей стилей браузера — а не ключевым словом display: inline из спецификации CSS.
  • В XML (у которого нет встроенных стилей) каждый элемент действительно по умолчанию имеет значение inline.

Старые и современные CSS: в старых спецификациях width и height не влияли на inline-элементы. Это замечание до сих пор встречается во многих руководствах, однако на практике браузеры игнорируют width/height у обычного inline-блока. Чтобы задать размер элемента и сохранить его в строке, используйте inline-block.

Типы блоков в CSS

В CSS существует несколько основных форматов блоков:

  • Inline — Строчные блоки располагаются в строке текста и не вызывают переноса строки. <span>, <em> и <img> по умолчанию являются строчными. Строчный блок принимает отступы и поля, однако вертикальные padding/margin не раздвигают соседние строки, а width/height игнорируются. Чтобы задать размер блока, оставив его в строке, используйте inline-block. (Подробнее: блочные и строчные элементы.)
  • Inline-block — Ведёт себя как строчный блок (располагается в строке рядом с текстом и другим строчным содержимым), но учитывает width, height и вертикальные margin/padding. Это значение выбирают, когда нужны размеры как у блока без переноса на новую строку.
  • Block — Блочные элементы начинаются с новой строки и по умолчанию растягиваются на всю доступную ширину контейнера. Они могут содержать другие блочные элементы. <p>, <ul>, <h1>-<h6>, <div>, <section> и <ol> по умолчанию являются блочными.
  • Flex — display: flex создаёт блочный flex-контейнер и располагает прямых потомков вдоль одной оси. Подробнее: Полное руководство по Flexbox.
  • Grid — display: grid создаёт блочный grid-контейнер и располагает потомков в двух измерениях (строки и столбцы). Подробнее: свойство grid.
  • Табличные значения — Значения table, table-row и table-cell заставляют не-табличные элементы вести себя как соответствующие HTML-элементы таблицы. inline-table ведёт себя как <table>, но как строчный блок; внутри него устанавливается блочный контекст форматирования.

Внешнее и внутреннее отображение: современный CSS описывает display как двойное значение. Внешнее значение (block или inline) управляет тем, как блок участвует в макете родителя; внутреннее значение (flow, flex, grid, table) управляет тем, как блок располагает собственных потомков. Именно поэтому flex делает элемент одновременно блочным блоком и flex-контейнером.

Начальное значениеinline
Применяется кВсем элементам.
НаследуетсяНет
АнимируетсяНет
ВерсияCSS1
DOM Syntaxobject.style.display = "list-item";

Синтаксис

Синтаксис свойства CSS display

display: inline | block | contents | flex | 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:

Пример свойства CSS display со значением inline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>
Попробуйте сами »

Результат

Пример свойства CSS display: элементы списка отображаются в строку

При применении display: inline к элементам списка они больше не начинаются с новой строки — вместо этого они располагаются рядом, разделённые только заданным margin-right.

Пример свойства display со значениями «inline» и «block»:

Пример свойства CSS display со значениями inline и block

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inline {
        border: 1px solid #1c87c9;
        display: inline;
      }
      .block {
        border: 1px solid #1c87c9;
        display: block;
        height: 30px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr />
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>
Попробуйте сами »

Первая пара <span> остаётся на одной строке, потому что inline игнорирует width и height. Элементы с классом .block, напротив, каждый занимает отдельную строку и учитывает ширину 300px и высоту 30px.

Пример свойства display со значением «block»:

Пример свойства CSS display со значением block

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
        display: block;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #8ebf42;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="block">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства display со значением «contents»:

Пример свойства CSS display со значением contents

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
        display: contents;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="contents">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Попробуйте сами »

При использовании display: contents обёртка .contents не создаёт собственного блока — её рамка и фон игнорируются, а дочерние элементы (текст и блок .hello) ведут себя так, будто являются прямыми потомками <body>.

Пример свойства display со значением «flex»:

Пример свойства CSS display со значением flex

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #flex {
        width: 300px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
        justify-content: center;
      }
      div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписание
inlineОтображает элемент как строчный блок (встраивается в текст, игнорирует width/height).
blockОтображает элемент как блочный блок (начинается с новой строки, заполняет доступную ширину).
inline-blockСтрочный блок, который учитывает width, height и вертикальные отступы.
flexБлочный flex-контейнер.
inline-flexСтрочный flex-контейнер.
gridБлочный grid-контейнер.
inline-gridСтрочный grid-контейнер.
contentsЭлемент не создаёт блока; его потомки отображаются как потомки родителя.
inline-tableСтрочная таблица. Ведёт себя как <table>, но как строчный блок.
tableВедёт себя как HTML-элемент <table>.
table-captionВедёт себя как HTML-элемент <caption>.
table-column-groupВедёт себя как HTML-элемент <colgroup>.
table-header-groupВедёт себя как HTML-элемент <thead>.
table-footer-groupВедёт себя как HTML-элемент <tfoot>.
table-row-groupВедёт себя как HTML-элемент <tbody>.
table-rowВедёт себя как HTML-элемент <tr>.
table-cellВедёт себя как HTML-элемент <td>.
table-columnВедёт себя как HTML-элемент <col>.
list-itemВедёт себя как HTML-элемент <li> (добавляет маркер).
run-inОтображается как блочный или строчный в зависимости от контекста. Устарело — удалено из большинства браузеров; не используйте.
noneПолностью удаляет элемент из макета; не создаёт блока и не занимает места.
initialУстанавливает свойство в значение по умолчанию (inline).
inheritНаследует значение от родительского элемента.

display: none vs. visibility: hidden

Частый источник путаницы: display: none полностью удаляет элемент из потока документа — он не занимает никакого места, словно его нет. visibility: hidden скрывает элемент, но сохраняет его блок, так что он по-прежнему резервирует место. Используйте display: none для схлопывания макета и visibility: hidden для скрытия с сохранением пространства.

Связанные свойства

Практика

Практика
Какие из перечисленных значений являются допустимыми значениями свойства CSS display?
Какие из перечисленных значений являются допустимыми значениями свойства CSS display?
Was this page helpful?