Kokia yra pagrindinė display savybės reikšmė CSS ir…

display savybė nustato, kaip elementas bus rodomas dokumente ir kaip jis sąveikaus su kitais elementais, dalyvaudamas maketo sraute (layout flow). Ji nustato elemento formatavimo tipą:

Pagrindinės reikšmės:

block: Elementas formatuojamas kaip blokas. Užima visą prieinamą plotį, pradeda naują eilutę, gali turėti nustatytus dydžius (width, height).
inline: Elementas formatuojamas kaip eilutė. Nepradeda naujos eilutės, užima tik reikalingą plotį, negali turėti nustatytų dydžių (width, height), vertikalių tarpų (margin-top, margin-bottom) ir vidinių tarpų (padding-top, padding-bottom), kurie neturi įtakos aplinkiniams elementams.
inline-block: Elementas formatuojamas kaip eilutė, bet elgiasi kaip blokas viduje eilutės. Nepradeda naujos eilutės, gali turėti nustatytus dydžius (width, height), taip pat vertikalius tarpus ir vidinius tarpus, kurie įtakoja aplinkinius elementus.
none: Elementas ir jo turinys nėra rodomi. Elementas visiškai pašalinamas iš dokumento srauto, neužima vietos.
flex: Elementas tampa Flex konteineriu, o jo tiesioginiai palikuonys — Flex elementais. Naudojamas lankstiems maketams kurti.
grid: Elementas tampa Grid konteineriu. Naudojamas tinklo pagrindu maketams kurti.

Kaip veikia:

Naršyklė naudoja display reikšmę, kad nustatytų, kokio tipo formatavimo kontekste yra elementas. Tai veikia:

Dokumento srautas: kaip elementas išsidėsto santykyje su kaimynais.
Elemento dydžiai: galimybė nustatyti plotį ir aukštį, turinio įtaka dydžiams.
Įtaka aplinkiniams elementams: kaip tarpai ir dydžiai veikia kitų elementų išsidėstymą.

Pavyzdys:

/* Elementas su display: block */
div {
  display: block;
  width: 100%; /* Užima visą plotį */
  margin-bottom: 10px; /* Sukuria vertikalų tarpą */
}

/* Elementas su display: inline */
span {
  display: inline;
  /* width ir height ignoruojami */
  /* margin-top ir margin-bottom ignoruojami */
}

/* Elementas su display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Galima nustatyti plotį */
  height: 100px; /* Galima nustatyti aukštį */
  margin: 5px; /* Sukuria tarpelius iš visų pusių */
}

/* Paslėptas elementas */
.hidden {
  display: none;
}

Kokia yra pagrindinė display savybės reikšmė CSS ir kaip ji veikia?