Маънии асосии хосияти display дар CSS чист ва чӣ гуна…

Масъул display муайян мекунад, ки унсур чӣ гуна дар ҳуҷҷат намоиш дода мешавад ва чӣ гуна бо дигар унсурҳо ҳамкорӣ мекунад, дар ҷараёни тарҳрезӣ (layout flow). Он намуди блоки форматкунии унсурро муайян мекунад.

Маъниҳои асосӣ:

block: Унсур ҳамчун блок формат карда мешавад. Он тамоми паҳнои дастрасро мегирад, аз нав оғоз мекунад, метавонад андозаҳои муайян дошта бошад (width, height).
inline: Унсур ҳамчун сатр формат карда мешавад. Аз нав оғоз намекунад, танҳо паҳнои заруриро мегирад, наметавонад андозаҳои муайян дошта бошад (width, height), маржаҳои вертикалӣ (margin-top, margin-bottom) ва padding-ҳои дохилӣ (padding-top, padding-bottom) ба унсурҳои атроф таъсир намерасонанд.
inline-block: Унсур ҳамчун сатр формат карда мешавад, аммо ҳамчун блок дар дохили сатр рафтор мекунад. Аз нав оғоз намекунад, метавонад андозаҳои муайян дошта бошад (width, height), инчунин маржаҳои вертикалӣ ва padding-ҳо, ки ба унсурҳои атроф таъсир мерасонанд.
none: Унсур ва мундариҷаи он намоиш дода намешаванд. Унсур пурра аз ҷараёни ҳуҷҷат хориҷ мешавад, ҷой намегирад.
flex: Унсур ҳамчун Flex-контейнер мешавад, ва фарзандони мустақимаш Flex-элементҳо мешаванд. Барои сохтани макетҳои чандир истифода мешавад.
grid: Унсур ҳамчун Grid-контейнер мешавад. Барои сохтани макетҳои асосёфта ба шабака истифода мешавад.

Касб:

Браузер арзиши display-ро барои муайян кардани навъи контексти форматиро, ки унсур дар он ҷойгир аст, истифода мебарад. Ин ба:

Токи ҳуҷҷат: Чӣ гуна унсур нисбат ба ҳамсояҳояш ҷойгир мешавад.
Андозаҳои унсур: Имконияти муайян кардани паҳноӣ ва баландӣ, таъсири мундариҷа ба андозаҳо.
Таъсир ба унсурҳои атроф: Чӣ гуна маржаҳо ва андозаҳои унсур ба ҷойгиршавии дигар унсурҳо таъсир мерасонанд.

Масалан:

/* Унсур бо display: block */
div {
  display: block;
  width: 100%; /* Тамом паҳноиро мегирад */
  margin-bottom: 10px; /* Меҳвари уфуқиро месозад */
}

/* Унсур бо display: inline */
span {
  display: inline;
  /* width ва height нодида гирифта мешаванд */
  /* margin-top ва margin-bottom нодида гирифта мешаванд */
}

/* Унсур бо display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Паҳнои муайян кардан мумкин аст */
  height: 100px; /* Баландии муайян кардан мумкин аст */
  margin: 5px; /* Меҳварҳоро аз ҳама тарафҳо месозад */
}

/* Унсур пинҳон */
.hidden {
  display: none;
}

Маънии асосии хосияти display дар CSS чист ва чӣ гуна кор мекунад?