Jaký je hlavní význam vlastnosti display v CSS a jak…

Vlastnost display určuje, jak se prvek zobrazí v dokumentu a jak bude interagovat s ostatními prvky, přičemž se podílí na toku rozvržení (layout flow). Definuje typ formátovacího bloku prvku.

Hlavní hodnoty:

block: Prvek je formátován jako blok. Zabírá celou dostupnou šířku, začíná na novém řádku a může mít stanovené rozměry (width, height).
inline: Prvek je formátován jako inline. Nezačíná nový řádek, zabírá pouze potřebnou šířku a nemůže mít stanovené rozměry (width, height). Vertikální okraje (margin-top, margin-bottom) a vnitřní výplně (padding-top, padding-bottom) neovlivňují okolní prvky.
inline-block: Prvek je formátován jako inline, ale chová se jako blok uvnitř řádku. Nezačíná nový řádek, může mít stanovené rozměry (width, height) a okraje a výplně, které ovlivňují okolní prvky.
none: Prvek a jeho obsah se nezobrazují. Prvek je úplně odstraněn z toku dokumentu a nezabírá žádné místo.
flex: Prvek se stává Flex kontejnerem a jeho přímí potomci jsou Flex prvky. Používá se k vytváření flexibilních rozvržení.
grid: Prvek se stává Grid kontejnerem. Používá se k vytváření rozvržení založených na mřížce.

Jak to funguje:

Prohlížeč používá hodnotu display k určení typu formátovacího kontextu, ve kterém se prvek nachází. To ovlivňuje:

Tok dokumentu: Jak je prvek umístěn vzhledem ke svým sousedům.
Rozměry prvku: Možnost nastavení šířky a výšky a vliv obsahu na rozměry.
Vliv na okolní prvky: Jak okraje a rozměry prvku ovlivňují rozložení ostatních prvků.

Příklad:

/* Element s display: block */
div {
  display: block;
  width: 100%; /* Zabírá celou šířku */
  margin-bottom: 10px; /* Vytváří svislý odstup */
}

/* Element s display: inline */
span {
  display: inline;
  /* width a height jsou ignorovány */
  /* margin-top a margin-bottom jsou ignorovány */
}

/* Element s display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Lze nastavit šířku */
  height: 100px; /* Lze nastavit výšku */
  margin: 5px; /* Vytváří okraje ze všech stran */
}

/* Skrytý prvek */
.hidden {
  display: none;
}

Jaký je hlavní význam vlastnosti display v CSS a jak funguje?