Как отобразить элемент на странице. Свойство display

Свойство display определяет тип отображения элемента, как он будет отображаться на веб-странице: как блок, строчный элемент или каким-то другим способом.

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

• block,
• inline,
• inline-block,
• none.

Теперь разберём на примерах значения свойства display.

block — элемент отображается как блок и занимает всю доступную ширину. Новый блок начинается с новой строки. Примером элемента, который имеет значение display: block, может быть div.

<div class="block">
  <h2>Заголовок блока</h2>
  <p>Текст внутри блока</p>
</div>

.block {
  display: block;
  background-color: #ccc;
  width: 500px;
  height: 300px;
}

inline — элемент отображается как строчный элемент и не создаёт новый блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого. Примером элемента, который имеет значение display: inline, может быть span.

<p>Этот текст <span class="inline">выделенный текст</span> и еще немного текста</p>

.inline {
  display: inline;
  background-color: yellow;
  padding: 5px;
}

Этот текст выделенный текст и еще немного текста

inline-block — элемент отображается как строчный элемент, но его содержимое может быть отформатировано как блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого, но может иметь ширину и высоту. Примером элемента, который имеет значение display: inline-block, может быть button.

<div class="inline-block">Этот текст находится на той же строке, что и</div>
<div class="inline-block">этот текст</div>

.inline-block {
  display: inline-block;
  background-color: #ccc;
  width: 150px;
  height: 100px;
  padding: 10px;
}

none — элемент не отображается на веб-странице и его содержимое не занимает места. Это может быть полезно для скрытия элементов на странице или для создания анимаций. Примером элемента, который имеет значение display: none, может быть script.

<div class="hidden">Этот элемент скрыт</div>

.hidden {
  display: none;
}

Пример использования свойства displayс разными значениями.

<div class="block-example">Этот блочный элемент занимает всю ширину.</div>

<span class="inline-example">Этот строчный элемент занимает только столько места, сколько ему нужно.</span>

<button class="inline-block-example">Этот элемент имеет значение inline-block, поэтому его содержимое может быть отформатировано как блок и иметь ширину и высоту.</button>

<div class="hidden-element">Этот элемент имеет значение none, поэтому он не отображается на веб-странице.</div>

Стилизуем элементы так:

.block-example {
  display: block;
  background-color: yellow;
}

.inline-example {
  display: inline;
  background-color: pink;
}

.inline-block-example {
  display: inline-block;
  background-color: lightblue;
  width: 200px;
  height: 50px;
}

.hidden-element {
  display: none;
}

Блочный элемент имеет жёлтый фон, строчный элемент — розовый фон, элемент button — голубой фон и имеет ширину и высоту, а скрытый элемент не отображается на странице.

Наследуется ли свойство display

Свойство display является не наследуемым, что означает, что тип отображения элемента не будет наследоваться его потомками. Тип отображения элемента должен быть указан явно для каждого элемента на странице.

Например, если родительский элемент имеет свойство display: block;, а его дочерний элемент не имеет заданного свойства display, то тип отображения дочернего элемента будет определён по умолчанию и может отличаться в зависимости от типа элемента.

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

<div class="parent">
  <p>Это абзац, наследующий свойства родительского элемента</p>
  <div class="child">
    <p>Это абзац с явно заданным типом отображения</p>
  </div>
</div>

Стили для блоков:

.parent {
  display: block;
}

.child {
  display: inline;
}

Здесь родительский элемент имеет свойство display: block;, но дочерний элемент .child имеет свойство display: inline;. Поэтому абзац, находящийся в дочернем элементе, будет отображаться как инлайновый элемент, несмотря на то, что родительский элемент имеет тип отображения блочного элемента.

Нюансы использования

Как и любое CSS-свойство, display имеет нюансы и особенности, которые важно учитывать при создании веб-страниц.

• display определяет, как элемент будет взаимодействовать с другими элементами на странице. Например, элементы с типом block занимают всю доступную ширину и начинаются с новой строки, что может повлиять на позиционирование других элементов на странице.
• Некоторые элементы имеют собственные значения по умолчанию для свойства display. Например, div имеет значение по умолчанию display: block, а span имеет значение display: inline. Поэтому, если вы хотите изменить значение display для этих элементов, необходимо указать это в CSS.
• При использовании значения display: inline-block нужно учитывать, что между элементами может появиться небольшой пробел, который вызван пробелом в HTML-коде. Этот нюанс можно устранить разными способами, например, удалением пробелов в коде или применением стилей, которые устраняют эффект.

Материалы по теме

• CSS-свойство position
• Как прятать
• CSS-свойство max-height

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.