Свойство display определяет, как элемент будет отображаться в документе и как он будет взаимодействовать с другими элементами, участвуя в потоке верстки (layout flow). Оно задает тип блока форматирования элемента.

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

block: Элемент форматируется как блок. Занимает всю доступную ширину, начинается с новой строки, может иметь установленные размеры (width, height).
inline: Элемент форматируется как строчный. Не начинает новую строку, занимает только необходимую ширину, не может иметь установленные размеры (width, height), вертикальные отступы (margin-top, margin-bottom) и внутренние отступы (padding-top, padding-bottom) не влияют на окружающие элементы.
inline-block: Элемент форматируется как строчный, но ведет себя как блок внутри строки. Не начинает новую строку, может иметь установленные размеры (width, height), а также вертикальные отступы и внутренние отступы, влияющие на окружающие элементы.
none: Элемент и его контент не отображаются. Элемент полностью удаляется из потока документа, не занимает место.
flex: Элемент становится Flex-контейнером, а его прямые потомки — Flex-элементами. Используется для создания гибких макетов.
grid: Элемент становится Grid-контейнером. Используется для создания макетов на основе сетки.

Как работает:

Браузер использует значение display для определения типа форматирующего контекста, в котором находится элемент. Это влияет на:

Поток документа: Как элемент располагается относительно своих соседей.
Размеры элемента: Возможность задавать ширину и высоту, влияние контента на размеры.
Влияние на окружающие элементы: Как отступы и размеры элемента влияют на расположение других элементов.

Пример:

/* Элемент с display: block */
div {
  display: block;
  width: 100%; /* Занимает всю ширину */
  margin-bottom: 10px; /* Создает вертикальный отступ */
}

/* Элемент с display: inline */
span {
  display: inline;
  /* width и height игнорируются */
  /* margin-top и margin-bottom игнорируются */
}

/* Элемент с display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Можно задать ширину */
  height: 100px; /* Можно задать высоту */
  margin: 5px; /* Создает отступы со всех сторон */
}

/* Элемент скрыт */
.hidden {
  display: none;
}

Каково основное значение свойства display в CSS и как оно работает?