Margin çökmesi nedir ve ne için kullanılır?

CSS'te margin collapsing (marjinal çökme) mekanizması, iki veya daha fazla bitişik blok öğesinin dikey marjlarının, ayrıca ebeveyn ve ilk/son çocuk öğenin marjlarının toplam değil, en büyük olanına çökmesi durumudur.

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

• Bitişik öğeler: Bir öğenin margin-bottom'u ile sonraki öğenin margin-topu.
• Ebeveyn ve ilk/son çocuk: Ebeveynin margin-topu ile ilk çocuğun margin-topu; ebeveynin margin-bottomu ile son çocuğun margin-bottomu. Aralarında sınır (border), iç boşluk (padding), satır içi içerik (inline) yoksa veya ebeveyn flex/grid konteyner değilse olur.
• Boş bloklar: Öğenin margin-topu ile margin-bottomu, içerik, sınır veya iç boşluk yoksa.

Bitişik öğelere örnek:

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

Bu durumda, öğeler arasındaki mesafe 30px olur, 50px değil.

Ebeveyn ve ilk çocuk örneği:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Çocuk öğe</div>
</div>

Ebeveynin üst kenarından içeriğe olan mesafe 40px olur.

Kullanım amacı:

Margin çökmesi, belge akışında bloklar arasındaki dikey mesafeleri öngörülebilir kılmaya ve gereksiz boşlukları önlemeye yardımcı olur. Bu, tasarımcıların paragraf veya başlıklar için marjinleri bağımsız olarak belirlemesine olanak tanır ve tarayıcı, alanların doğru şekilde birleştirilmesini sağlar.

Çökmesini nasıl önleriz:

• Öğeler veya ebeveyn ile çocuk arasında sınır (border) eklemek.
• Öğeler veya ebeveyn ile çocuk arasında iç boşluk (padding) eklemek.
• Ebeveyn öğede overflow özelliğini visible dışı bir değere ayarlamak.
• Öğeyi float yapmak (float).
• absolute veya fixed konumlandırma kullanmak.
• Öğeleri Flexbox veya Grid formatlama bağlamına dönüştürmek (ebeveyn öğe).
• Öğeyi inline-block yapmaktır.

/* Ebeveyn ve çocuk için önleme */
.parent {
  border-top: 1px solid transparent; /* veya padding-top */
}

/* Bitişik öğeler için önleme */
.element + .element {
  margin-top: 0; /* veya border-top */
}