W3docs
ru
Войти

Свойство CSS display

The display CSS property defines the display type of an element. Read about all the values and try examples.

Свойство display определяет тип блока, который используется для HTML-элемента.

С помощью свойства display мы можем переопределить начальное значение элемента. Например, блочный элемент можно отобразить как строчный, указав значение "inline". В более старых спецификациях CSS строчный элемент не принимал свойства height и width для изменения своих размеров или высоты строкового блока. Однако современный CSS полностью поддерживает эти свойства для строчных элементов, и они действительно влияют на разметку.

В HTML значения свойства display по умолчанию берутся из поведения, описанного в спецификациях HTML, либо из таблицы стилей браузера или пользовательской таблицы стилей по умолчанию. С другой стороны, значение по умолчанию в XML — "inline".

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

  • Inline
    Строчные элементы или элементы строчного уровня — это блоки, которые располагаются в строке, не перенося её. Элементы <span>, <em> и <img> являются частью строкового блока, но не могут вызвать перенос строки. Строчные элементы могут иметь внутренние отступы и внешние отступы, но задание width и height не изменит их размеры или высоту строкового блока в более старых спецификациях CSS. Современный CSS полностью поддерживает эти свойства для строчных элементов, и они действительно влияют на разметку. Указание padding и margin для элемента будет сдвигать другие элементы в строке только по горизонтали. Однако элемент строчного уровня может принимать width и height, если он задан как inline-block с помощью свойства display.
  • Inline-block
    Элементы inline-block такие же, как строчные элементы, за исключением того, что они принимают width и height. Width и height сдвигают элементы в строке как по горизонтали, так и по вертикали.
  • Block
    Блочные блоки или элементы блочного уровня не находятся в строковом блоке, а разрывают его. По умолчанию они занимают как можно больше горизонтального пространства. Элементы блочного уровня могут содержать другие элементы блочного уровня. Примерами элементов блочного уровня являются <p>, <ul>, <h1>-<h6>, <div>, <section> и <ol>.
  • Flex
    Свойство display также используется для Flexbox. Значение flex создаёт для элемента блок уровня блока и размещает содержимое согласно модели Flexbox. Здесь вы можете прочитать Полное руководство по Flexbox.
  • Grid
    Свойство display изначально задаёт сеточную раскладку Grid. Оно создаёт для элемента блок уровня блока, размещая содержимое согласно модели Grid.
  • Table Values
    Значения display позволяют сделать элементы, не являющиеся таблицами, похожими на элементы таблицы. Каждое из табличных значений заставляет элемент вести себя как соответствующий элемент таблицы в HTML. Значение inline-table ведёт себя как HTML-элемент <table>, но как строчный блок. Внутри блока таблицы находится контекст блочного уровня.
Initial Value-
Applies toAll elements.
InheritedNo
AnimatableNo
VersionCSS1
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</h2>
    <p>Здесь элемент списка имеет своё начальное значение:</p>
    <ul>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ul>
    <p>Здесь элемент списка используется со свойством display. Используется значение "inline":</p>
    <ul class="display">
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
    </ul>
  </body>
</html>
Попробуйте сами »

Результат

CSS display Property

Пример свойства 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</h2>
    <p>Здесь элемент списка имеет значение "initial". Мы видим, что значение "inline" не принимает height и width:</p>
    <span>Это какой-то текст.</span>
    <span class="inline">Это другой текст.</span>
    <hr />
    <p>Здесь элемент списка используется со значением "block" свойства display:</p>
    <span class="block">Это какой-то текст.</span>
    <span class="block">Это другой текст.</span>
  </body>
</html>
Попробуйте сами »

Пример свойства 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</h2>
    <div class="block">
      Lorem Ipsum — это текст-заглушка в полиграфии и наборе текста. Lorem Ipsum был стандартным текстом-заглушкой в отрасли с 1500-х годов, когда неизвестный печатник взял набор шрифтов и перемешал их, чтобы создать образец шрифта.
      <div class="hello">HELLO!</div>
      Он пережил не только пять веков, но и переход в электронный набор, оставаясь по сути неизменным.
    </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</h2>
    <div class="contents">
      Lorem Ipsum — это текст-заглушка в полиграфии и наборе текста. Lorem Ipsum был стандартным текстом-заглушкой в отрасли с 1500-х годов, когда неизвестный печатник взял набор шрифтов и перемешал их, чтобы создать образец шрифта.
      <div class="hello">HELLO!</div>
      Он пережил не только пять веков, но и переход в электронный набор, оставаясь по сути неизменным.
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства 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</h2>
    <p>Здесь используется "display: flex;":</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>
Попробуйте сами »

Значения

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

Практика

Практика

Какие существуют различные значения для CSS-свойства display, как указано в предоставленном URL?