Hack Frontend Community

Свойства display в CSS

Свойство display в CSS управляет тем, как элемент отображается на странице. Оно определяет, будет ли элемент блоком, строчным элементом, или элементом с другим типом отображения.

Основные значения для свойства display

ЗначениеОписаниеПример
blockЭлемент занимает всю доступную ширину, начиная с новой строки. Обычно используется для контейнеров, заголовков, абзацев и т.д.<div>, <p>, <h1>
inlineЭлемент занимает только необходимое пространство по ширине и не вызывает перехода на новую строку.<span>, <a>, <strong>
inline-blockЭлемент ведет себя как строчный элемент, но при этом позволяет задавать размеры (ширину и высоту).<img>, <button>
noneЭлемент не отображается и не занимает места в документе. Все его свойства, включая размеры и позиционирование, игнорируются.<div style="display: none;">
flexЭлемент становится флекс-контейнером, внутри которого его дочерние элементы становятся флекс-элементами (позволяет создавать гибкие макеты).<div style="display: flex;">
gridЭлемент становится контейнером для сетки, а его дочерние элементы становятся ячейками этой сетки.<div style="display: grid;">
tableЭлемент ведет себя как таблица, подобно элементу <table>.<div style="display: table;">
list-itemЭлемент ведет себя как элемент списка, подобно <li>.<div style="display: list-item;">
run-inЭтот режим используется редко. Элемент сначала ведет себя как блочный, а затем, если возможно, он становится строчным.<div style="display: run-in;">
inheritЗначение display наследуется от родительского элемента.<div style="display: inherit;">
unsetЕсли свойство display задано на элементе, то оно сбрасывается, и элемент возвращается к своему первоначальному значению.<div style="display: unset;">

Когда использовать каждое значение

  1. block — используйте для элементов, которые должны занимать всю ширину родительского контейнера, например, для контейнеров и секций.
  2. inline — используйте для элементов, которые должны быть расположены в строке с другими элементами, например, для ссылок или текста.
  3. inline-block — полезно для создания элементов, которые должны располагаться в строке, но при этом иметь возможность задавать размеры.
  4. none — используйте для скрытия элементов, когда необходимо полностью удалить их из потока документа.
  5. flex — используйте для создания гибких, адаптивных макетов, где дочерние элементы могут изменять свой размер в зависимости от доступного пространства.
  6. grid — используйте для создания двухмерных макетов с точным позиционированием элементов в сетке.
  7. table — используйте для создания таблиц, где элементы должны вести себя как строки и ячейки таблицы.
  8. list-item — используйте для элементов, которые должны вести себя как элементы списка, например, <ul> и <ol>.
  9. run-in — редко используется, но полезно для создания элементов, которые сначала ведут себя как блочные, а затем становятся строчными.

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

/* Флекс-контейнер */
.container {
  display: flex;
  justify-content: space-between;
}

/* Элемент в сетке */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Скрытие элемента */
.hidden {
  display: none;
}

Особенности использования display: none:

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