Aký je hlavný význam vlastnosti display v CSS a ako…

Vlastnosť display určuje, ako sa prvok zobrazí v dokumente a ako bude komunikovať s ostatnými prvkami, pričom sa zúčastňuje na toku rozloženia (layout flow). Určuje typ bloku formátovania prvku.

Hlavné hodnoty:

block: Prvok sa formátuje ako blok. Zaberá celú dostupnú šírku, začína na novom riadku, môže mať nastavené rozmery (width, height).
inline: Prvok sa formátuje ako riadkový. Nezačína na novom riadku, zaberá len potrebnú šírku, nemôže mať nastavené rozmery (width, height), vertikálne medzery (margin-top, margin-bottom) a vnútorné okraje (padding-top, padding-bottom) neovplyvňujú okolitých prvkov.
inline-block: Prvok sa formátuje ako riadkový, ale správa sa ako blok v rámci riadku. Nezačína na novom riadku, môže mať nastavené rozmery (width, height), ako aj vertikálne medzery a vnútorné okraje, ktoré ovplyvňujú okolitých prvkov.
none: Prvok a jeho obsah sa nezobrazujú. Prvok je úplne odstránený z toku dokumentu, nezaberá miesto.
flex: Prvok sa stáva Flex kontajnerom a jeho priame potomky sú Flex prvky. Používa sa na vytváranie flexibilných rozložení.
grid: Prvok sa stáva Grid kontajnerom. Používa sa na vytváranie rozložení založených na mriežke.

Ako to funguje:

Prehliadač používa hodnotu display na určenie typu formátovacieho kontextu, v ktorom sa prvok nachádza. To ovplyvňuje:

Tok dokumentu: Ako je prvok umiestnený voči susedným prvkom.
Rozmery prvku: Možnosť nastaviť šírku a výšku, vplyv obsahu na rozmery.
Vplyv na okolitých prvkov: Ako marginy a rozmery prvku ovplyvňujú rozloženie ostatných prvkov.

Príklad:

/* Prvok s display: block */
div {
  display: block;
  width: 100%; /* Zaberá celú šírku */
  margin-bottom: 10px; /* Vytvára vertikálny odstup */
}

/* Prvok s display: inline */
span {
  display: inline;
  /* width a height sa ignorujú */
  /* margin-top a margin-bottom sa ignorujú */
}

/* Prvok s display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Môže sa nastaviť šírka */
  height: 100px; /* Môže sa nastaviť výška */
  margin: 5px; /* Vytvára medzery zo všetkých strán */
}

/* Prvok skrytý */
.hidden {
  display: none;
}

Aký je hlavný význam vlastnosti display v CSS a ako funguje?