CSSтеги display мүнөзүнүн негизги мааниси эмне жана…

display мүнөздөмөсү элементтин документте кандайча көрсөтүлөрүн жана башка элементтер менен кандайча өз ара аракеттенерине аныктайт, ал түзүмдүн агымына (layout flow) катышат. Ал элементтин форматтоо түрүн аныктайт:

Негизги маанилер:

block: Элемент блок катары форматталат. Бардык жеткиликтүү кеңдикти ээлейт, жаңы саптан башталат, өлчөмдөрү (width, height) коюлушу мүмкүн.
inline: Элемент саптык катары форматталат. Жаңы сапты баштабайт, керектүү кеңдикти гана ээлейт, өлчөмдөрү (width, height) коюлбайт, вертикалдык аралыктар (margin-top, margin-bottom) жана ички аралыктар (padding-top, padding-bottom) чөйрөдөгү элементтерге таасир этпейт.
inline-block: Элемент саптык катары форматталат, бирок блок катары иштейт. Жаңы сапты баштабайт, өлчөмдөрү (width, height) коюлмак, ошондой эле вертикалдык аралыктар жана ички аралыктар чөйрөдөгү элементтерге таасир этет.
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;
}

CSSтеги display мүнөзүнүн негизги мааниси эмне жана ал кантип иштейт?