w3docs logo

CSS свойство display

Свойство display определяет тип блока, который используется для HTML элемента. Значением по умолчанию этого свойства является "inline". Элемент такого типа не может иметь свойства height и width. Эти свойства игнорируются.

При помощи свойства display можно переопределить значение по умолчанию элемента. Например, блочный элемент может быть отображен в виде строчного элемента, если задано значение "inline".

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

Значение по умолчанию inline
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.display = "list-item";

Синтаксис

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;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>                    
      .display li{   	
      display: inline;
      margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства display</h2>
    <p>Здесь список элементов использован со значением по умолчанию:</p>
    <ul>
      <li>List iteam</li>
      <li>List iteam</li>
    </ul>
    <p>Здесь список элементов использован со свойством display. Использовано значение "inline":</p>
    <ul class="display">
      <li>List iteam 1</li>
      <li>List iteam 2</li>
    </ul>
  </body>
</html>

Пример, где элемент представлен как блочный. Значение "inline" не принимает свойства height и width:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>  
      .inline {
      border: 1px solid #1c87c9;  
      display: inline; 	
      height: 30px;
      width: 300px;
      }                  
      .block {
      border: 1px solid #1c87c9;   	
      display: block;
      height: 30px;
      width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства display</h2>
    <p>Здесь список элементов использован со значением "initial":</p>
    <span>Это какой-то текст.</span>
    <span class="inline">Это еще один текст.</span>
    <hr>
    <p>Здесь список элементов использован со значением "block":</p>
    <span class="block">Это какой-то текст.</span>
    <span class="block">Это еще один текст.</span>              
  </body>
</html>

Пример со значением "block":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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 является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. 
      <div class="hello">ПРИВЕТ!</div>
     Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
    </div>
  </body>
</html>

Пример со значением "contents":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .contents {
      display: contents;
      border: 1px solid #666;
      background-color: #eee;
      padding: 10px;
      width: 200px;
      }
      .hello {
      border: 1px solid #1c87c9;
      background-color: #ccc;
      padding: 10px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства display</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">ПРИВЕТ!</div>
    Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
    </div>
  </body>
</html>

Пример со значением "flex":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      #flex {
      width: 300px;
      height: 100px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      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>

Значения

Значение Описание
inline Отображает строчный элемент. Значение по умолчанию.
block Отображает блочный элемент.
contents Потомки элемента становятся непосредственно на его место, будто они — потомки его родителя, а сам элемент исчезает.
flex Отображает элемент в виде flex-контейнера в блочном уровне.
grid Отображает элемент в виде grid-контейнера в блочном уровне.
inline-block Отображает элемент в виде блочного контейнера в строчном уровне.
inline-flex Отображает элемент в виде flex-контейнера в строчном уровне.
inline-grid Отображает элемент в виде grid-контейнера в строчном уровне.
inline-table Отображает элемент в виде таблицы строчного уровня. Реагирует также, как HTML элемент <table> , но как строчный блок, а не элемент блочного уровня. Внутри табличного блока находится контекст блочного уровня.
list-item Элемент реагирует как HTML <li> элемент.
run-in Отображает элемент как блочный или строчный в зависимости от контекста.
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-cell Элемент реагирует как HTML <td> элемент.
table-column Элемент реагирует как HTML <col> элемент.
table-row Элемент реагирует как HTML <tr> элемент.
none Элемент не отображается.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Практикуйте свои знания

Какие значения могут быть у свойства CSS 'display'?
Считаете ли это полезным?