Справочник HTML & CSS

display

Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.

Синтаксис

display: value;

Значения

Параметр	Тип	Описание
block	keyword	Блок: с новой строки, на всю ширину.
inline	keyword	Строчный элемент: внутри строки, без ширины и высоты.
inline-block	keyword	Внутри строки, но с шириной и высотой.
flex	keyword	Контейнер flexbox.
grid	keyword	Контейнер сетки.
none	keyword	Элемент скрыт и не занимает места.

Примеры

Блочные, строчные и строчно-блочные элементы:

<style>
  span { background: lavender; padding: 4px; }
  .ib { display: inline-block; width: 100px; }
  .b { display: block; }
</style>
 
<span>inline</span> <span>inline</span>
<span class="ib">inline-block</span>
<span class="b">block</span>

Скрытый элемент:

<p>A visible paragraph.</p>
<p style="display: none;">This paragraph is not on the page.</p>
<p>Another visible one.</p>

Примечания

display: none убирает элемент целиком, в том числе для экранных чтецов. Чтобы скрыть, но оставить место, используйте visibility: hidden. Есть ещё inline-flex и inline-grid — контейнеры, которые стоят внутри строки, как текст.

См. также

visibility — Скрывает элемент, но сохраняет занятое им место.
flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
grid-template-columns — Количество и ширина колонок сетки.
<span> — Строчный контейнер без смысла: нужен, чтобы оформить часть текста.

Вопросы и ответы по теме

В учебнике

Свойство display — Блочные и строчные элементы, значения block, inline, inline-block и none, скрытие элементов.

Спасибо, что читаете!