Как работает свойство display в CSS

display inline block в CSS размещает элемент в строке и позволяет задавать размеры. Так можно выстроить карточки рядом, сохранив каждой собственную ширину и высоту. Свойство display также управляет скрытием элементов, табличным отображением, flex-раскладкой и сетками. Разберем различия значений, рабочие примеры и ограничения, которые влияют на верстку.

display css свойства: внешний и внутренний тип

Свойство display определяет, какие CSS-боксы создает элемент. Боксом называют прямоугольную область, которую браузер использует при раскладке. У большинства значений есть внешний и внутренний тип отображения.

• Внешний тип определяет участие бокса в окружающей раскладке: например, блочное или строчное поведение.
• Внутренний тип определяет раскладку содержимого: обычный поток, flex или grid.

Flex-контейнер с объявлением display: flex получает блочное внешнее поведение. При выборе inline-flex контейнер размещается в строке, сохраняя flex-раскладку внутри.

Двухзначный синтаксис записывает эти части отдельно. Например, строчный flex-контейнер можно описать через display: inline flex вместо inline-flex. Обычному блоку соответствует пара display: block flow.

Двухзначная запись работает в Chrome и Edge с версии 115, в Firefox с версии 70 и в Safari с версии 15. Привычные однословные значения остаются корректными.

.toolbar {
  display: inline-flex;
  display: inline flex;
}

Браузер без поддержки второй записи сохранит первое объявление. Такой порядок позволяет использовать двухзначную форму с запасным вариантом.

Начальное значение свойства display – inline. Однако браузерная таблица стилей задает элементам разные значения: div обычно получает block, span – inline, а li – list-item.

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

Синтаксис описывают справочник MDN и спецификация CSS Display. Раскладки дочерних элементов описаны отдельно в Flexbox и Grid Level 1. Вложенные сетки рассматривает Grid Level 2. Таблицы совместимости на Can I Use показывают реализации браузеров, но не заменяют проверку доступности вашей страницы.

Чем различаются display block css, inline и inline-block

Эти 3 значения определяют поведение элементов в обычном потоке. Для сравнения возьмем горизонтальное направление письма, без flex, grid и позиционирования.

Блок начинает новую строку, а при width: auto занимает доступную ширину контейнера. Заданная ширина ограничивает его размер, но не отменяет блочное поведение.

Строчные элементы участвуют в строках вместе с текстом. Длинный span может разбиться на несколько фрагментов при переносе. Для такого элемента width и height не задают размеры.

Ограничение размеров относится к обычным незамещаемым строчным элементам, например span. У изображения img ширина и высота работают даже при строчном отображении.

inline block css: как поставить карточки в ряд

Значение inline-block создает цельный строчный бокс с блочной раскладкой внутри. Браузер переносит такой бокс целиком, если места в строке недостаточно.

Скопируйте пример в файл display-demo.html и откройте браузером. В следующих примерах HTML можно размещать внутри body, а CSS – внутри style в head.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Карточки inline-block</title>
  <style>
    .inline-cards { font-size: 0; }
    .inline-card {
      display: inline-block;
      box-sizing: border-box;
      width: 50%;
      padding: 16px;
      border: 1px solid #999;
      font-size: 16px;
      vertical-align: top;
    }
    @media (max-width: 480px) {
      .inline-card { width: 100%; }
    }
  </style>
</head>
<body>
  <div class="inline-cards">
    <article class="inline-card">Первая карточка</article>
    <article class="inline-card">Вторая карточка с длинным текстом</article>
  </div>
</body>
</html>

При ширине окна больше 480px карточки занимают по половине строки. На узком экране каждая карточка получает отдельную строку. Свойство vertical-align: top совмещает верхние края при разной высоте содержимого.

Пробелы и переводы строк между тегами создают межсловный зазор. Поэтому 2 карточки шириной 50% могут не поместиться рядом. В примере font-size: 0 убирает зазор, а дочернее правило восстанавливает размер текста.

Другой способ – удалить пробельный текст между закрывающим и открывающим тегами. Для новой раскладки карточек обычно удобнее flex с управляемым gap.

display none css: как скрыть элемент

Браузер не создает боксы элемента и потомков при display: none. Остальные элементы занимают освободившееся место. Сам узел остается в DOM, поэтому JavaScript по-прежнему может найти и изменить его.

Другие способы скрытия сохраняют место или возможность взаимодействия. Таблица описывает 4 варианта без дополнительных правил и переопределений.

Потомок элемента с visibility: hidden может получить visible и стать видимым. Если родитель скрыт через display: none, изменение display потомка не вернет его на экран.

Ни один из этих способов не удаляет обработчики событий. Вызов dispatchEvent() отправляет событие узлу независимо от его видимости. Скрытие также не останавливает таймеры и выполняющийся JavaScript.

Содержимое с атрибутом hidden сейчас неактуально для пользователя. Авторское правило display может переопределить визуальное скрытие. Отдельный режим hidden="until-found" ведет себя иначе и в таблицу не включен.

Как скрыть элемент через JavaScript

Через свойство element.style.display JavaScript меняет встроенное CSS-объявление элемента. Чтобы скрыть панель, присвойте этому свойству строку 'none'.

<button id="hide-panel" type="button">Скрыть</button>
<button id="show-panel" type="button">Показать</button>
<div id="panel">Содержимое панели</div>

<script>
  const element = document.getElementById('panel');
  const originalDisplay = element.style.display;

  document.getElementById('hide-panel').addEventListener('click', () => {
    element.style.display = 'none';
  });

  document.getElementById('show-panel').addEventListener('click', () => {
    element.style.display = originalDisplay;
  });
</script>

Разместите скрипт после разметки панели, как в примере. Кнопка «Скрыть» уберет панель вместе с занимаемым местом. Кнопка «Показать» восстановит исходное встроенное объявление. Если исходная строка пуста, браузер снова применит правила таблиц стилей.

Не возвращайте всем элементам block, иначе можно сломать flex-контейнер или сетку. Обычная inline-запись также не перебивает авторское правило с !important. Скрытие не защищает секретные данные: пользователь может прочитать HTML или ответ сервера независимо от отображения.

Как list-item создает маркер списка

Значение list-item создает основной бокс и бокс маркера. Свойство list-style-type задает тип маркера, list-style-position – его положение. Сокращение list-style объединяет настройки маркера.

<ul class="steps">
  <li>Создайте HTML</li>
  <li>Добавьте CSS</li>
</ul>

<style>
  .steps { padding-left: 2rem; }
  .steps li {
    display: list-item;
    list-style: square outside;
  }
  .steps li::marker { color: #165baa; }
</style>

Браузер покажет 2 пункта с квадратными синими маркерами. Внешнему маркеру нужно место. При нулевых отступах он может выйти за границу контейнера.

Значение можно назначить элементу, отличному от li. Это полезно при ограничениях чужой разметки, когда нужен визуальный маркер. Однако display не создает полноценную HTML-структуру списка. Если вы управляете разметкой, используйте ul или ol с элементами li.

display table css: табличная раскладка и другие значения

Табличные значения включают CSS-модель таблицы для существующих элементов. Браузер раскладывает их по правилам таблицы, но HTML-смысл разметки сохраняется.

display table cell: как отцентрировать содержимое

В табличной ячейке свойство vertical-align управляет вертикальным выравниванием содержимого. Для центрирования задайте ячейке display: table-cell и vertical-align: middle.

<div class="center-table">
  <div class="center-cell">Текст по центру</div>
</div>

<style>
  .center-table {
    display: table;
    width: 100%;
    height: 180px;
  }
  .center-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: #eef3f8;
  }
</style>

Текст окажется посередине области высотой не меньше 180px. Если содержимого много, таблица увеличится. Здесь браузер выравнивает содержимое внутри ячейки; у inline-block свойство vertical-align выравнивает сам бокс в строке.

Как переключить блоки в табличную раскладку

Медиазапрос позволяет показывать пары характеристик столбцами на широком экране. На узком экране те же блоки сохраняют последовательное расположение.

<div class="specs">
  <div class="spec-row">
    <div class="spec-cell">Материал</div>
    <div class="spec-cell">Хлопок</div>
  </div>
  <div class="spec-row">
    <div class="spec-cell">Цвет</div>
    <div class="spec-cell">Синий</div>
  </div>
</div>

<style>
  .spec-row { margin-bottom: 16px; }
  .spec-cell { padding: 8px; }
  @media (min-width: 720px) {
    .specs { display: table; width: 100%; }
    .spec-row { display: table-row; }
    .spec-cell {
      display: table-cell;
      border-bottom: 1px solid #aaa;
    }
  }
</style>

При ширине окна от 720px названия и значения образуют 2 столбца. При меньшей ширине название располагается над значением. Удаление медиазапроса вернет блочную раскладку на всех размерах экрана. Для настоящих табличных данных используйте table, заголовки th и подпись caption: CSS-таблица из div не заменяет отношения между заголовками и ячейками.

Как flex и inline-flex размещают элементы

Flexbox распределяет элементы вдоль главной оси контейнера. Поперечная ось проходит перпендикулярно главной; ее направление зависит от flex-direction. Значения flex и inline-flex различаются внешним поведением контейнера.

Свойства flex-контейнера и элементов

Flex-контейнер управляет своими непосредственными дочерними боксами. Свойства его элементов не переходят автоматически на вложенных потомков.

Перестановка через order не меняет порядок узлов в DOM. Не используйте ее для исправления нелогичной последовательности чтения или переходов клавиатурой.

Как собрать адаптивный ряд карточек

Разрешите перенос и задайте карточкам базовый размер 240px. Свободное место браузер распределит между карточками одной линии.

<div class="flex-cards">
  <article>Карточка 1</article>
  <article>Карточка 2 с подробным описанием</article>
  <article>Карточка 3</article>
</div>

<style>
  .flex-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
  }
  .flex-cards > article {
    flex: 1 1 240px;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px;
    background: #eef3f8;
    overflow-wrap: anywhere;
  }
</style>

В достаточно широком контейнере 3 карточки встанут рядом с промежутками 16px. При сужении окна карточки начнут переноситься, затем выстроятся по одной. Карточка в последней неполной строке растянется на свободную ширину. Если столбцы должны совпадать во всех строках, используйте grid: flex рассчитывает свободное место отдельно для каждой линии.

Как grid и inline-grid создают сетку

Grid раскладывает дочерние элементы по строкам и столбцам общей сетки. Значение grid создает блочный контейнер, inline-grid – строчный. Внутренние правила сетки от этого не меняются.

Основные термины CSS Grid

Сетка состоит из линий и ограниченных ими участков. Эти понятия помогают задавать размеры столбцов и размещать элементы.

• Трек – пространство между соседними параллельными линиями: строка или столбец.
• Линия – граница трека; линии можно использовать при размещении элементов.
• Ячейка – участок между соседними линиями в обоих направлениях.
• Область – прямоугольник из одной или нескольких ячеек.

Как собрать сетку карточек

Функция repeat() повторяет столбцы, а minmax() ограничивает их размер. Значение auto-fit подбирает число столбцов по доступной ширине.

<div class="grid-cards">
  <article>Карточка 1</article>
  <article>Карточка 2</article>
  <article>Карточка 3</article>
  <article>Карточка 4</article>
</div>

<style>
  .grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
  }
  .grid-cards > article {
    min-width: 0;
    padding: 20px;
    background: #eef3f8;
    overflow-wrap: anywhere;
  }
</style>

Карточки образуют равные столбцы с промежутками 16px. На контейнере шириной меньше 220px единственный столбец займет доступную ширину. При увеличении контейнера браузер добавит новые столбцы без медиазапросов.

Вложенная сетка со значением subgrid использует треки родительской сетки. Например, карточка может унаследовать строки для заголовка, описания и кнопки. Значение задают в grid-template-columns или grid-template-rows, а сам вложенный контейнер получает display: grid.

Для чего нужны flow-root и contents

Эти значения решают разные задачи с границами CSS-боксов. С помощью flow-root контейнер создает самостоятельный контекст блочного форматирования. При contents обертка теряет собственный бокс в раскладке.

Как flow-root удерживает float внутри контейнера

Контейнер с flow-root учитывает высоту плавающих потомков. Поэтому фон и рамка охватывают изображение с float.

<div class="float-note">
  <div class="float-preview">Превью</div>
  <p>Короткая подпись.</p>
</div>

<style>
  .float-note {
    display: flow-root;
    border: 2px solid #789;
    padding: 12px;
  }
  .float-preview {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 16px;
    background: #dce8f4;
  }
</style>

Рамка охватит превью высотой 100px, даже если подпись короче. Для сравнения высоты контейнера временно уберите правило display: flow-root. В отличие от приема с overflow: hidden, это правило не требует обрезать выступающее содержимое.

Как contents убирает бокс обертки

Значение contents оставляет элемент в DOM, но убирает его собственный бокс. Дочерние боксы могут участвовать в grid- или flex-раскладке внешнего контейнера. Селекторы и наследование продолжают учитывать реальную структуру DOM. Значение поддерживают Chrome и Edge с версии 65, Firefox с версии 37 и Safari с версии 11.1.

<div class="contents-grid">
  <div class="group-wrapper">
    <div>А</div>
    <div>Б</div>
  </div>
  <div>В</div>
</div>

<style>
  .contents-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .group-wrapper { display: contents; }
  .contents-grid > div > div,
  .contents-grid > div:last-child {
    padding: 16px;
    background: #eef3f8;
  }
</style>

Боксы «А», «Б» и «В» займут 3 столбца общей сетки. Обертка не получит видимой рамки или фона, поскольку собственного бокса у нее нет. Если убрать у обертки display: contents, блоки «А» и «Б» окажутся внутри одной grid-ячейки.

Применяйте это значение к нейтральным контейнерам без важной роли. В реализациях встречались ошибки с потерей роли самой обертки в дереве доступности. При этом ее содержимое могло оставаться доступным для чтения.

Кнопкам, ссылкам и структурным элементам таблицы сохраняйте собственные боксы. Проверяйте свою страницу клавиатурой и скринридером, если меняете структуру раскладки. Для критичной семантики выбирайте обертку с обычным отображением и настройте сетку вокруг нее.

Редкие значения ruby и run-in

Значения этой группы не нужны для обычных карточек и сеток. Ruby предназначен для типографских аннотаций, а run-in описывает контекстное строчно-блочное поведение.

Для произношения над текстом используйте HTML-элементы ruby и rt. Такая разметка передает назначение аннотации без искусственной сборки из span.

<ruby lang="ja">漢字<rt>かんじ</rt></ruby>

Браузер расположит чтение рядом с основным текстом по правилам ruby. Внутренние значения display обслуживают эту модель форматирования. Для обычной аннотации из примера вручную назначать их не нужно.

Поддержка самих значений display различается. Firefox поддерживает ruby, ruby-base и ruby-text с версии 38. Chrome принимает ruby и ruby-text с версии 121, но не принимает ruby-base. Safari не поддерживает ни одно из трех значений.

Поэтому для аннотаций полагайтесь на HTML-элементы ruby и rt, а не на ручное назначение этих значений.

CSS-боксы ruby не требуют отдельного HTML-элемента для каждой внутренней роли. В частности, ruby-base-container нельзя понимать как указание добавить тег rbc. Браузер формирует анонимные боксы при построении раскладки. В новой разметке размещайте основной текст непосредственно внутри ruby, а аннотацию – в rt; дополнительные элементы rb и rtc для этого не нужны.

По замыслу модели бокс с run-in может присоединиться к следующему блоку. Не закладывайте такое поведение в основу макета. Если заголовок должен идти в одной строке с текстом, используйте обычную строчную разметку и display: inline. Для ряда карточек выбирайте flex, для общей сетки – grid.

Как выбрать значение display под задачу

Выбирайте значение по расположению элемента и устройству его содержимого. Для отдельного блока в обычном потоке подходит display: block. Для управления группой дочерних карточек чаще нужны flex или grid.

Ошибки при работе с display

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

• Ширина не меняется у span. Для обычного строчного бокса width не задает размер. Поставьте inline-block, если элемент должен оставаться в строке.
• Карточка с inline ведет себя как блок. Непосредственный элемент flex- или grid-контейнера участвует в специальной раскладке. Его внешний тип отображения подвергается блочному преобразованию.
• Карточки inline-block переносятся раньше времени. Пробельные символы между тегами занимают место. Уберите их либо обнулите размер шрифта родителя с восстановлением у карточек.
• Вертикальный padding перекрывает соседнюю строку. У обычного inline-элемента padding отрисовывается без увеличения высоты строки. Для отдельной плашки подойдет inline-block.
• Элемент исчезает без плавного перехода. Обычное переключение display не создает промежуточных визуальных состояний. Для затухания изменяйте opacity, а после завершения скрывайте элемент через display: none. Специальные механизмы дискретных переходов требуют отдельной настройки.
• Невидимая кнопка продолжает нажиматься. Полностью прозрачный элемент при opacity: 0 сохраняет взаимодействие. Если элемент полностью недоступен по смыслу, используйте hidden или display: none.
• У кнопки пропали фон и рамка после contents. Это значение убирает собственный бокс элемента. Верните кнопке обычное отображение; для управления дочерними боксами меняйте нейтральную обертку.
• Contents нарушил таблицу. Удаление боксов структурных элементов меняет табличную модель и может затронуть доступность. Сохраняйте структуру таблицы, а адаптивность решайте без удаления ее структурных боксов.

Совет от нашей редакции: перед заменой display проверяйте поведение родителя. Часто перенос ломают ширина, промежутки или настройки контейнера. Изменяйте одно правило за раз и сравнивайте результат на широком и узком экране.