Маржалардын чогулушу (margin collapse) эмне жана ал…

CSSте маржалардын (margin collapsing) механизмине ылайык, эки же андан көп көршілүү блоктук элементтердин, ошондой эле ата-эне жана анын биринчи/акыркы баласынын вертикалдуу маржалары кошулбайт, тескерисинче, бир маржага биригет, ал эң чоңу болот.

Бул биригүү төмөнкү учурларда болот:

Көршілүү элементтер: бир элементтин margin-bottom жана кийинки элементтин margin-top.
Ата-эне жана биринчи/акыркы бала: ата-эне жана анын биринчи же акыркы баласынын margin-top жана margin-bottom. Эгер алардын ортосунда чектөө (border), отступ (padding), inline мазмуну же ата-эне flex/grid контейнер эмес болсо, бул ишке ашат.
Бош блоктор: эгер алардын мазмуну, чектөөлөрү же отступтери жок болсо, margin-top жана margin-bottom.

Мисалдар:

<div style="margin-bottom: 20px;">Элемент 1</div>
<div style="margin-top: 30px;">Элемент 2</div>

Бул учурда аралыктын узундугу 30px болот, 50px эмес.

Ата-эне жана биринчи бала үчүн:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Бала элемент</div>
</div>

Ата-эненин жогору жагынан мазмунга чейинки аралык 40px болот.

Кандай колдонулат:

Маржалардын биригүүсү блоктордун ортосундагы алдын ала белгиленген вертикалдуу аралыкты сактоого жардам берет, ашыкча боштуктарды алдын алат. Бул типографиялык вертикалдык ритм түзүүгө жеңилдик берет, анткени дизайнерлер параграфтар же башталыштар үчүн маржаларды көз карандысыз белгилеп, браузер автоматтык түрдө кеңейтүүнү тууралайт.

Кандай алдын алуу керек:

Элементтердин ортосуна же ата-эне менен баланын ортосуна чектөө (border) кошуу.
Алардын ортосуна отступ (padding) кошуу.
Ата-эне үчүн overflow касиетин visible эмес мааниге коюу.
Float элементтерин колдонуу.
absolute же fixed позициялоону колдонуу.
Flexbox же Grid форматтоо контекстине өткөрүү.
Элементти inline-block кылуу.

/* Ата-эне жана бала үчүн алдын алуу */
.parent {
  border-top: 1px solid transparent; /* же padding-top */
}

/* Көршілүү элементтер үчүн алдын алуу */
.element + .element {
  margin-top: 0; /* же border-top */
}

Маржалардын чогулушу (margin collapse) эмне жана ал эмне үчүн колдонулат?