Care este semnificația principală a proprietății…

Vlastnost display určuje, jak bude prvek zobrazen v dokumentu a jak bude interagovat s ostatními prvky, přičemž se podílí na toku rozvržení (layout flow). Určuje 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í odsazení (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 vnitřní odsazení, 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:

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

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

/* Prvek 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;
}

Care este semnificația principală a proprietății display în CSS și cum funcționează?