Margin çökməsi nədir və nə üçün istifadə olunur?

CSS-də marjinal yığılma (margin collapsing) mexanizmi, iki və ya daha çox yan-yana blok elementlərinin şaquli marjlarının, eləcə də valideyn və onun ilk/son uşağının marjlarının toplam deyil, ən böyük olanına yığılması prosesidir.

Yığılma aşağıdakı hallarda baş verir:

• Yan-yana elementlər: Bir elementin margin-bottom və növbəti elementin margin-topu.
• Valideyn və ilk/son uşaq: Valideynin margin-topu və ilk uşağın margin-topu; valideynin margin-bottomu və son uşağın margin-bottomu. Bu, aralarında sərhəd (border), padding, inline məzmun və ya valideyn flex/grid konteyner deyilsə baş verir.
• Boş bloklar: Elementin margin-topu və onun margin-bottomu, əgər içində məzmun, sərhəd və ya padding yoxdursa.

Yan-yana element nümunəsi:

<div style="margin-bottom: 20px;">Element 1</div>
<div style="margin-top: 30px;">Element 2</div>

Bu halda, elementlər arasındakı məsafə 30px olacaq, 50px deyil.

Valideyn və ilk uşaq nümunəsi:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Uşaq element</div>
</div>

Valideynin yuxarı kənarından onun məzmununa qədər məsafə 40px olacaq.

Nəyə görə istifadə olunur:

Margin yığılma mexanizmi, sənədin normal axışında bloklar arasında şaquli məsafələri proqnozlaşdırıla bilən saxlamağa və artıq boşluqları qarşısını almağa kömək edir. Bu, dizaynerlərin paraqraflar və ya başlıqlar üçün marjinləri müstəqil təyin etməsinə imkan verir və brauzer düzgün şəkildə boşluqları birləşdirir.

Necə qarşısını almaq olar:

• Elementlər və ya valideyn və uşaq arasında sərhəd (border) əlavə etmək.
• Elementlər və ya valideyn və uşaq arasında padding əlavə etmək.
• Valideyn elementində overflow xüsusiyyətini visible olmayan dəyərə təyin etmək.
• Elementi float etmək (float).
• absolute və ya fixed mövqeləndirmə istifadə etmək.
• Elementləri Flexbox və ya Grid formatlama kontekstinə çevirmək (valideyn element).
• Elementi inline-block etmək.

/* Valideyn və uşaq üçün qarşısını alma */
.parent {
  border-top: 1px solid transparent; /* və ya padding-top */
}

/* Yan-yana elementlər üçün qarşısını alma */
.element + .element {
  margin-top: 0; /* və ya border-top */
}