Display

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

Зачем нужно

display управляет базовым поведением элемента в макете. Без понимания разницы между block, inline, inline-block, flex и grid невозможно контролировать раскладку страницы.

Где используется

  • Управление потоком документа
  • Скрытие элементов
  • Переключение между блочным и строчным поведением
  • Основа для Flexbox и Grid
  • Создание таблиц из произвольных элементов

Предпосылки

block

Блочный элемент занимает всю доступную ширину, начинается с новой строки:

div     { display: block; } /* По умолчанию */
p       { display: block; }
h1–h6   { display: block; }
section { display: block; }

/* Превратить span в блочный */
span.block {
  display: block;
  width: 200px;
  height: 100px;
  margin: 10px auto; /* Центрирование работает */
}

Характеристики:

  • Занимает 100% ширины родителя
  • Начинается с новой строки
  • Поддерживает width, height, margin, padding во всех направлениях

inline

Строчный элемент не разрывает строку:

span   { display: inline; } /* По умолчанию */
a      { display: inline; }
strong { display: inline; }
em     { display: inline; }

Характеристики:

  • Не начинает новую строку
  • Ширина и высота определяются контентом
  • width и height игнорируются
  • Вертикальные margin игнорируются
  • Вертикальные padding визуально работают, но не влияют на поток
/* Это НЕ СРАБОТАЕТ */
span {
  display: inline;
  width: 200px;  /* Игнорируется */
  height: 50px;  /* Игнорируется */
  margin-top: 20px; /* Игнорируется */
}

inline-block

Комбинация: ведёт себя как inline снаружи (в строке), как block внутри:

.badge {
  display: inline-block;
  width: 80px;        /* Работает! */
  height: 30px;       /* Работает! */
  margin: 5px;        /* Работает во всех направлениях! */
  padding: 4px 8px;
  text-align: center;
  background: #3498db;
  color: white;
  border-radius: 4px;
}

Характеристики:

  • Не начинает новую строку (как inline)
  • Поддерживает width, height, margin, padding (как block)
  • Элементы в строке могут иметь пробелы между ними (из-за whitespace в HTML)

Устранение пробелов между inline-block

/* Способ 1: font-size на родителе */
.container {
  font-size: 0;
}
.container > .item {
  display: inline-block;
  font-size: 16px; /* Восстановить */
}

/* Способ 2: Лучше использовать Flexbox */
.container {
  display: flex;
}

none

Полностью убирает элемент из потока и рендеринга:

.hidden {
  display: none; /* Элемент не занимает места, не виден */
}

/* Сравнение с visibility: hidden */
.invisible {
  visibility: hidden; /* Элемент не виден, НО занимает место */
}
Свойство Виден? Занимает место? Доступен скринридерам?
display: none Нет Нет Нет
visibility: hidden Нет Да Нет
opacity: 0 Нет Да Да

flex

Превращает элемент во flex-контейнер:

.container {
  display: flex; /* Блочный flex-контейнер */
}

.inline-container {
  display: inline-flex; /* Строчный flex-контейнер */
}

Подробнее: Основы Flexbox

grid

Превращает элемент в grid-контейнер:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.inline-container {
  display: inline-grid;
}

contents

Элемент «исчезает» из DOM для CSS, но его дети остаются:

.wrapper {
  display: contents; /* Сам элемент не генерирует бокс */
}
/* Дети .wrapper ведут себя так, как будто обёртки нет */

Применение:

/* Семантическая обёртка без влияния на grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid .group {
  display: contents; /* Дети группы участвуют в grid напрямую */
}

Осторожно: display: contents удаляет элемент из accessibility tree в некоторых браузерах. Не применяйте к интерактивным элементам.

table, table-row, table-cell

Имитация таблицы из произвольных элементов:

.table      { display: table; }
.row        { display: table-row; }
.cell       { display: table-cell; vertical-align: middle; }

/* Практическое применение — вертикальное центрирование (legacy) */
.center-container {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}

В современном CSS используйте Flexbox или Grid вместо table display.

list-item

Элемент ведёт себя как <li> — с маркером:

.custom-list div {
  display: list-item;
  list-style-type: disc;
  margin-left: 20px;
}

flow-root

Создаёт новый Block Formatting Context (BFC), содержит float-элементы:

.container {
  display: flow-root; /* Содержит float-потомков */
}

flow-root — современная замена clearfix-хаков.

Двухкомпонентный синтаксис display

CSS Display Level 3 позволяет указывать внешний и внутренний тип:

/* Эквиваленты */
display: block;             /* = display: block flow; */
display: inline;            /* = display: inline flow; */
display: flex;              /* = display: block flex; */
display: inline-flex;       /* = display: inline flex; */
display: grid;              /* = display: block grid; */
display: inline-grid;       /* = display: inline grid; */
display: inline-block;      /* = display: inline flow-root; */

Частые ошибки

  1. Установка width/height на inline-элемент — игнорируется:

    span { width: 200px; } /* Не работает! Нужен display: inline-block */

  2. display: none для доступности — скринридеры не увидят. Для визуально скрытого, но доступного текста:

    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

  3. Пробелы между inline-block — пробелы в HTML создают видимые промежутки

  4. display: contents на кнопках/ссылках — ломает доступность в некоторых браузерах

Практика

  • Создать навигацию из <a> с display: inline-block
  • Скрыть элемент тремя способами: display: none, visibility: hidden, opacity: 0
  • Использовать display: contents для grid-обёртки
  • Применить display: flow-root вместо clearfix

Связанные темы

Ресурсы