display: block, inline, inline-block, none

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

Зачем нужно

display — одно из самых фундаментальных свойств CSS. Именно оно определяет, будет ли элемент на новой строке или в потоке текста, можно ли задать ему width/height, и как он себя ведёт в потоке. Это первый шаг перед переходом к flex, grid и другим значениям.

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

  • block — параграфы, заголовки, секции
  • inline — ссылки, <span>, курсив внутри текста
  • inline-block — навигационные ссылки с padding, кнопки
  • none — скрытие элементов, тоггл видимости

block

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

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

.block {
  display: block;
  width: 300px;
  height: 100px;
  margin: 16px 0;
}

<p>Первый параграф — блочный</p>
<p>Второй параграф — на новой строке</p>

inline

Строчные элементы занимают только ширину контента, не начинают новую строку. width/height не работают; вертикальные margin игнорируются.

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

.highlight {
  display: inline;
  background: yellow;
  /* width: 200px; — не работает */
}

<p>Текст с <span class="highlight">выделением</span> внутри строки.</p>

inline-block

Элемент ведёт себя как inline (не разрывает строку), но принимает width, height, вертикальные margin и padding.

.btn {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 8px 16px;
  text-align: center;
  vertical-align: middle;
}

<a class="btn" href="/">Главная</a>
<a class="btn" href="/about">О нас</a>
<!-- Кнопки в строку, но с точным контролем размеров -->

none

Элемент полностью убирается из потока — не занимает места, не виден, не кликабелен.

.modal {
  display: none; /* скрыто по умолчанию */
}
.modal.open() {
  display: block; /* показано */
}

Отличие от visibility: hidden: none убирает элемент из потока; hidden сохраняет место.

Сравнительная таблица

Свойство Новая строка width/height Вертикальный margin
block да да да
inline нет нет нет
inline-block нет да да
none — — —

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

  1. width на inline-элементе — <span> с width: 200px не изменит размер; нужен display: inline-block или block
  2. Пробелы между inline-block — пробелы в HTML между inline-block элементами создают видимые зазоры; решение: font-size: 0 на родителе или Flexbox
  3. display: none вместо визуального скрытия для доступности — display: none скрывает и от скринридеров; для визуального скрытия с сохранением доступности используйте .sr-only класс

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

Ресурсы