Какво е основното значение на свойството display в…

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

Основни стойности:

block: Елементът се форматира като блок. Заема цялата налична ширина, започва на нов ред и може да има зададени размери (width, height).
inline: Елементът се форматира като inline. Не започва нов ред, заема само необходимата ширина и не може да има зададени размери (width, height). Вертикалните маржове (margin-top, margin-bottom) и вътрешните отстъпки (padding-top, padding-bottom) не влияят на околните елементи.
inline-block: Елементът се форматира като inline, но се държи като блок вътре в реда. Не започва нов ред, може да има зададени размери (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 и как работи то?