CSS-də sərhədlərin yığılması nədir?

CSS-də sərhədlərin çökməsi (margin collapsing) hadisəsidir ki, burada yan-yana yerləşən blokların şaquli marginləri birləşir. Bu birləşmiş marginin ölçüsü, çökmüş marginlərin ən böyük dəyəri kimi müəyyən edilir.

Çökmə aşağıdakı hallarda baş verir:

Yaxın elementlər arasında: İki qonşu elementin şaquli marginləri çökmüş olur.
```
<p>Paraqraf 1</p>
<p>Paraqraf 2</p>
```
Əgər <p> elementinin margin-bottom və margin-top xüsusiyyətləri müvafiq olaraq təyin olunubsa, bu marginlər çökmüş ola bilər.
Valideyn və onun ilk/son uşağı arasında: Əgər valideynin border, padding, display: flex, display: grid, overflow: hidden və ya digər formatlama kontekstini yaradan xüsusiyyətləri yoxdursa, onun yuxarı margini ilk uşağın margin-top ilə, aşağı margini isə son uşağın margin-bottom ilə çökmüş ola bilər.
```
<div class="parent">
  <p class="child">Uşaq elementi</p>
</div>
```
Boş elementdə: Əgər elementin məzmunu yoxdursa (height: 0, border və padding olmadan), onun yuxarı və aşağı marginləri bir-biri ilə çökmüş ola bilər.
```
<div class="empty"></div>
```

Cəmləşmənin nəticələrini göstərən cədvəl:

Margin 1	Margin 2	Çökmə nəticəsi
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Marginlərin çökməsi yalnız şaquli istiqamətdə (yalnız margin-top və margin-bottom) baş verir. Üfüqi marginlər (margin-left və margin-right) heç vaxt çökməz.

Çökməni qarşısını almaq üçün müxtəlif üsullar mövcuddur, məsələn, border, padding əlavə etmək, display: flex, display: grid, overflow: hidden istifadə etmək və ya display: flow-root ilə yeni formatlama konteksti yaratmaq.