Исполняемые доки CSS: Display в CSS

Q: Чем отличаются block, inline и inline-block?

Элемент block начинается с новой строки и заполняет доступную ширину. Элемент inline идет внутри текста и игнорирует width, height и вертикальные отступы. inline-block идет внутри текста как inline, но принимает ширину, высоту, padding и margin как block.

Q: Чем display: none отличается от visibility: hidden?

display: none убирает элемент и его место. visibility: hidden делает его невидимым, но сохраняет его место в раскладке, поэтому ничего не сдвигается.

Q: div по умолчанию блочный или строчный?

Блочный. div, p, заголовки, ul, section и form по умолчанию block; span, a, strong, em, img, input и button это inline или inline-block.

Что делает display

У каждого элемента есть значение display, которое определяет, как он размещается. Первые три, с которыми вы встретитесь, это block, inline и inline-block. Вот три одинаковых блока, с одинаковыми width, height, padding и margin, различается только display:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Начинается с новой строки	Да	Нет	Нет
Ширина по умолчанию	Заполняет контейнер	По содержимому	По содержимому
`width` и `height`	Применяются	Игнорируются	Применяются
Вертикальный margin	Применяется	Игнорируется	Применяется
Вертикальный padding	Раздвигает содержимое	Рисуется, но не раздвигает строки	Раздвигает содержимое
Типичные элементы	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (замещаемые элементы ведут себя так)

В превью блочный элемент стоит на отдельной строке шириной 120px. Строчный игнорирует ширину и высоту и оборачивает только свое слово, а его вертикальный padding и рамка выступают над строкой и под ней, не делая строку выше. Блок inline-block остается в строке текста, но сохраняет полный размер.

display: block

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

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

Ширину блока можно задать, и тогда margin: 0 auto центрирует его, как показано на странице выравнивание div по центру.

display: inline-block

inline-block это золотая середина: он идет в строке как слово, но ему можно задать размер. Это удобно для бейджей, кнопок и иконок внутри текста:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Несколько блоков inline-block в ряд получают между собой небольшой промежуток из-за пробелов в HTML. Для рядов блоков лучше подходит display: flex у родителя.

display: none и visibility: hidden

Оба делают элемент невидимым. Разница в том, сохраняет ли он свое место:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Занимает место	Нет	Да	Да
Можно кликнуть	Нет	Нет	Да
Читается программами чтения с экрана	Нет	Нет	Да
Можно плавно анимировать	Нет	Нет	Да

HTML-атрибут hidden делает то же, что display: none, через таблицу стилей браузера, а значит, любое правило CSS, задающее элементу display (например, .card { display: flex; }), перебивает его, и элемент снова появляется. Добавьте [hidden] { display: none !important; }, если это вам мешает.

Чтобы скрыть что-то визуально, но оставить для программ чтения с экрана (скажем, подпись для кнопки-иконки), используйте класс «визуально скрыто», а не display: none.

display: flex и display: grid

Эти два значения превращают элемент в контейнер раскладки для его дочерних элементов:

display: flex выстраивает дочерние элементы в одну строку или колонку с управлением выравниванием и промежутками. Смотрите Flexbox CSS.
display: grid размещает дочерние элементы по строкам и колонкам одновременно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Сам контейнер остается блочным. inline-flex и inline-grid делают то же самое с дочерними элементами, но сам контейнер идет в строке, как inline-block.

Остальные значения

Значение	Что делает
`flow-root`	Блок, который вмещает свои float и не дает отступам дочерних элементов вытекать наружу; современный «clearfix»
`contents`	Собственный блок элемента исчезает, а его дочерние элементы ведут себя как дочерние элементы его родителя. Не используйте на кнопках, списках и таблицах: некоторые браузеры теряют смысл элемента для программ чтения с экрана
`list-item`	Блок с маркером списка, значение по умолчанию у `li`
`table`, `table-row`, `table-cell`	Табличная раскладка для нетабличных элементов
`inline-flex`, `inline-grid`	Flex- или grid-контейнер, который стоит в строке

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

width или height у span или a. Строчные элементы их игнорируют. Используйте inline-block или block.
Вертикальный margin у строчного элемента. Тоже игнорируется. Решение то же.
display: none для текста, который нужен программам чтения с экрана. Он скрывает его и от них.
Ожидание, что дочерний элемент появится внутри родителя с display: none. Внутри скрытого родителя ничего не отрисовывается.
Правило display перебивает атрибут hidden. Правило CSS побеждает.
Попытка анимировать display. display: none скрывает элемент сразу, без затухания; анимируйте opacity, а display (или visibility) переключайте в конце.

Часто задаваемые вопросы

Чем отличаются block, inline и inline-block?

Элемент block начинается с новой строки и заполняет доступную ширину. Элемент inline идет внутри текста и игнорирует width, height и вертикальные отступы. inline-block идет внутри текста как inline, но принимает ширину, высоту, padding и margin как block.

Что делает display: none?

Полностью убирает элемент со страницы: он не занимает места, не отрисовывается и скрыт от программ чтения с экрана. Его дочерние элементы скрыты вместе с ним и не могут быть показаны собственным значением display.

Чем display: none отличается от visibility: hidden?

display: none убирает элемент и его место. visibility: hidden делает его невидимым, но сохраняет его место в раскладке, поэтому ничего не сдвигается.

div по умолчанию блочный или строчный?

Блочный. div, p, заголовки, ul, section и form по умолчанию block; span, a, strong, em, img, input и button это inline или inline-block.

Почему между элементами inline-block появляется промежуток?

Пробельные символы между тегами в HTML отображаются как пробел, так же как между словами. Используйте у родителя display: flex с gap или уберите пробелы.

Связанные концепции