CSS display: contents объяснение

Функция находится в статусе ограниченной доступности в Baseline.

Display: contents — это CSS-свойство, которое делает так, что элемент сам по себе исчезает, а его содержимое отображается как будто оно прямо внутри родителя. Это полезно, когда нужен семантический тег для разметки, но не хочется лишних блоков или оберток в итоговом отображении.

Пример использования:

<div>
  <div style="display: contents;">
    <p>Это параграф внутри div с display: contents.</p>
  </div>
</div>

Здесь <div style="display: contents;"> не создаёт отдельную ячейку, а выводит <p> прямо внутри внутреннего <div> без своих рамок или отступов. Хотя display: contents — мощное решение, важно помнить, что оно не поддерживается во всех браузерах и может повлиять на работу с событиями или стилями, если использовать неправильно.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.