Mis on display omaduse põhiväärtus CSS-is ja kuidas…

display omadus määrab, kuidas element kuvatakse dokumendis ja kuidas see suhtleb teiste elementidega, osaledes paigutusvoos (layout flow). See määrab elemendi formaadi tüübi:

Põhiväärtused:

block: Element vormindatakse blokina. Võtab kogu saadaval laiuse, algab uuel real, võib omada määratud suuruseid (width, height).
inline: Element vormindatakse rida- või jooneelemendina. Ei alusta uut rida, võtab ainult vajaliku laiuse, ei saa omada määratud suuruseid (width, height), vertikaalseid vahemaid (margin-top, margin-bottom) ja sisemisi vahemaid (padding-top, padding-bottom) ei mõjuta ümbritsevaid elemente.
inline-block: Element vormindatakse kui ridaelemendina, kuid käitub nagu blokk rea sees. Ei alusta uut rida, võib omada määratud suuruseid (width, height), samuti vertikaalseid vahemaid ja sisemisi vahemaid, mis mõjutavad ümbritsevaid elemente.
none: Element ja selle sisu ei kuvata. Element eemaldatakse täielikult dokumendi voost, ei võta ruumi.
flex: Element muutub Flex-konteineriks, ning selle otsesed järeltulijad on Flex-elemendid. Kasutatakse paindlike paigutuste loomiseks.
grid: Element muutub Grid-konteineriks. Kasutatakse võrgupõhiste paigutuste loomiseks.

Kuidas see töötab:

Brauser kasutab display väärtust, et määrata, millist tüüpi formaadi kontekstis element asub. See mõjutab:

Dokumendi voogu: kuidas element asetub oma naabrite suhtes.
Elementide suuruseid: võimalust määrata laius ja kõrgus, sisu mõju suurustele.
Mõju ümbritsevatele elementidele: kuidas marginaalid ja suurused mõjutavad teiste elementide paigutust.

Näide:

/* Element display: block */
div {
  display: block;
  width: 100%; /* võtab kogu laiuse */
  margin-bottom: 10px; /* loob vertikaalse vahemaa */
}

/* Element display: inline */
span {
  display: inline;
  /* width ja height ignoreeritakse */
  /* margin-top ja margin-bottom ignoreeritakse */
}

/* Element display: inline-block */
img {
  display: inline-block;
  width: 100px; /* võib määrata laiuse */
  height: 100px; /* võib määrata kõrguse */
  margin: 5px; /* loob vahemaid kõigist külgedest */
}

/* Peidetud element */
.hidden {
  display: none;
}

Mis on display omaduse põhiväärtus CSS-is ja kuidas see töötab?