Kāda ir galvenā display īpašības nozīme CSS un kā tā…

display īpašība nosaka, kā elements tiks attēlots dokumentā un kā tas sadarbojas ar citiem elementiem, piedaloties izkārtojuma plūsmā (layout flow). Tā nosaka elementa formāta tipu:

Galvenās vērtības:

block: Elements tiek formatēts kā bloks. Aizņem visu pieejamo platumu, sākas jaunā rindā, var būt noteikti izmēri (width, height).
inline: Elements tiek formatēts kā līnija. Neuzsāk jaunu rindu, aizņem tikai nepieciešamo platumu, nevar būt noteikti izmēri (width, height), vertikālas atstarpes (margin-top, margin-bottom) un iekšējās atstarpes (padding-top, padding-bottom) neietekmē apkārtējos elementus.
inline-block: Elements tiek formatēts kā līnija, bet uzvedas kā bloks iekš līnijas. Neuzsāk jaunu rindu, var būt noteikti izmēri (width, height), kā arī vertikālas atstarpes un iekšējās atstarpes, kas ietekmē apkārtējos elementus.
none: Elements un tā saturs netiek rādīts. Elements pilnībā tiek izņemts no dokumenta plūsmas, neaizņem vietu.
flex: Elements kļūst par Flex konteineru, un tā tiešie bērni — Flex elementi. Izmanto elastīgu izkārtojumu veidošanai.
grid: Elements kļūst par Grid konteineru. Izmanto tīkla veida izkārtojumu veidošanai.

Kā tas darbojas:

Pārbaudītājs izmanto display vērtību, lai noteiktu, kāda veida formāta konteksts ir elementam. Tas ietekmē:

Dokumenta plūsmu: kā elements izvietojas attiecībā pret kaimiņiem.
Elementa izmērus: iespēju noteikt platumu un augstumu, satura ietekmi uz izmēriem.
Ietekmi uz apkārtējiem elementiem: kā atstarpes un izmēri ietekmē citu elementu izvietojumu.

Piemērs:

/* Elements ar display: block */
div {
  display: block;
  width: 100%; /* aizņem visu platumu */
  margin-bottom: 10px; /* rada vertikālo atstarpi */
}

/* Elements ar display: inline */
span {
  display: inline;
  /* width un height tiek ignorēti */
  /* margin-top un margin-bottom tiek ignorēti */
}

/* Elements ar display: inline-block */
img {
  display: inline-block;
  width: 100px; /* var noteikt platumu */
  height: 100px; /* var noteikt augstumu */
  margin: 5px; /* rada atstarpes no visām pusēm */
}

/* Slēpts elements */
.hidden {
  display: none;
}

Kāda ir galvenā display īpašības nozīme CSS un kā tā darbojas?