CSS'de kenarların çökmesi nedir?

Margin çökmesi (margin collapsing), CSS'te yan yana gelen blokların dikey marginlerinin tek bir margin haline gelmesi olayıdır. Bu birleşmiş marginin boyutu, çöküşen marginlerin maksimum değeri olarak belirlenir.

Çöküş aşağıdaki durumlarda gerçekleşir:

Yan yana gelen öğeler arasında: İki komşu öğenin dikey marginleri çöküşür.
```
<p>Paragraf 1</p>
<p>Paragraf 2</p>
```
Eğer <p> öğeleri sırasıyla margin-bottom ve margin-top özelliklerine sahipse, bu marginler çökebilir.
Bir ebeveyn ile ilk/son çocuk arasında: Eğer ebeveynin border, padding, display: flex, display: grid, overflow: hidden veya diğer formatlama bağlamı oluşturan özellikleri yoksa, üst margin margin-top ilk çocuğa, alt margin ise son çocuğa çökebilir.
```
<div class="parent">
  <p class="child">Çocuk öğesi</p>
</div>
```
Boş bir öğede: Eğer bir öğenin içeriği yoksa (height: 0, border veya padding olmadan), üst ve alt marginleri birbirleriyle çökebilir.
```
<div class="empty"></div>
```

Çöküş sonuçlarını gösteren tablo:

Margin 1	Margin 2	Çöküş sonucu
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Margin çökmesi yalnızca dikey yönde (sadece margin-top ve margin-bottom) gerçekleşir. Yatay marginler (margin-left ve margin-right) asla çökmez.

Çöküşü önlemek için çeşitli yollar vardır, örneğin border, padding eklemek, display: flex, display: grid kullanmak, overflow: hidden uygulamak veya display: flow-root ile yeni bir formatlama bağlamı oluşturmaktır.