Свойства Display

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

Основные значения

  • display: block; — элемент отображается как блочный, занимает всю ширину родителя.
  • display: inline; — элемент отображается как строчный, занимает только необходимую ширину.
  • display: inline-block; — сочетает поведение блочного и строчного элементов.
  • display: none; — элемент полностью скрыт, не занимает место.
  • display: flex; — элемент становится контейнером Flexbox.
  • display: grid; — элемент становится контейнером Grid.

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

div.block {
  display: block;
  width: 100%;
  background: lightblue;
}

span.inline {
  display: inline;
  color: red;
}

div.flex-container {
  display: flex;
  gap: 10px;
}

Советы по вёрстке

  • Используйте display: flex или grid для сложной компоновки элементов.
  • Для скрытия элементов используйте display: none, а не visibility: hidden, если нужно полностью убрать элемент из потока.
  • Комбинируйте блочные и строчные элементы через inline-block для гибкой вёрстки.