CSS'te kenarların çökmesi nedir?

CSS'de margin collapsing (marjinal çökme) olayı, yan yana duran iki veya daha fazla blokun dikey sınırlarının birleşerek tek bir sınır oluşturmasıdır. Bu ortak sınırın boyutu, çökme sırasında en büyük değere göre belirlenir.

Çökme kurallarının temel prensipleri:

• Sadece dikey sınırlar (margin-top ve margin-bottom) çökebilir. Yatay sınırlar çökmez.
• Sadece bitişik öğelerin sınırları, aralarında başka öğe, padding, border veya blok içeriği yoksa çökebilir.
• İlk çocuk öğenin üst sınırı, aralarında padding, border veya başka içerik yoksa, ebeveyninin üst sınırıyla çökebilir.
• Son çocuk öğenin alt sınırı, aralarında padding, border veya başka içerik yoksa, ebeveyninin alt sınırıyla çökebilir.
• Boş bir öğenin üst ve alt sınırları, içerik veya padding, border yoksa, birbirleriyle çökebilir.
• Eğer çöküşen sınırların biri negatifse, toplam boyut, pozitif ve negatif değerlerin toplamı veya her ikisi de negatifse mutlak değeri alınarak hesaplanır.

Örnek:

<div class="box1">Öğe 1</div>
<div class="box2">Öğe 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Bu durumda, box1 ve box2 arasındaki dikey mesafe 30px olur (20px ve 30px arasındaki en büyük değer), 50px değil.

Çöküşü önleme yöntemleri:

• Öğeler arasında padding veya border ekleyin.
• Yeni bir formatlama bloğu oluşturun (örneğin, overflow: hidden, display: flow-root veya float öğeleri kullanarak).
• Öğeler için display: inline-block, display: flex veya display: grid kullanın.
• Mutlak konumlandırma kullanın.