Koje je osnovno značenje svojstva display u CSS i…

Svojstvo display određuje kako će se element prikazivati u dokumentu i kako će komunicirati sa drugim elementima, učestvujući u toku prikaza (layout flow). Ono određuje tip blok formata elementa.

Osnovne vrednosti:

block: Element se formatira kao blok. Zauzima celu dostupnu širinu, počinje u novom redu, može imati postavljene dimenzije (width, height).
inline: Element se formatira kao linijski. Ne počinje u novom redu, zauzima samo potrebnu širinu, ne može imati postavljene dimenzije (width, height), vertikalne razmake (margin-top, margin-bottom) i unutrašnje razmake (padding-top, padding-bottom) ne utiču na okolne elemente.
inline-block: Element se formatira kao linijski, ali se ponaša kao blok unutar reda. Ne počinje u novom redu, može imati postavljene dimenzije (width, height), kao i vertikalne razmake i unutrašnje razmake koji utiču na okolne elemente.
none: Element i njegov sadržaj se ne prikazuju. Element se potpuno uklanja iz toka dokumenta, ne zauzima mesto.
flex: Element postaje Flex kontejner, a njegovi direktni potomci Flex elementi. Koristi se za kreiranje fleksibilnih rasporeda.
grid: Element postaje Grid kontejner. Koristi se za kreiranje rasporeda zasnovanih na mreži.

Kako funkcioniše:

Pretraživač koristi vrednost display za određivanje tipa formatirajućeg konteksta u kojem se nalazi element. To utiče na:

Tok dokumenta: Kako se element pozicionira u odnosu na susedne elemente.
Dimenzije elementa: Mogućnost postavljanja širine i visine, uticaj sadržaja na dimenzije.
Uticaj na okolne elemente: Kako margine i dimenzije elementa utiču na raspored drugih elemenata.

Primer:

/* Element sa display: block */
div {
  display: block;
  width: 100%; /* Zauzima celu širinu */
  margin-bottom: 10px; /* Kreira vertikalni razmak */
}

/* Element sa display: inline */
span {
  display: inline;
  /* width i height se ignorišu */
  /* margin-top i margin-bottom se ignorišu */
}

/* Element sa display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Može se postaviti širina */
  height: 100px; /* Može se postaviti visina */
  margin: 5px; /* Kreira razmake sa svih strana */
}

/* Element sakriven */
.hidden {
  display: none;
}

Koje je osnovno značenje svojstva display u CSS i kako ono funkcioniše?