CSS Margin Collapsing: Kenar Boşlukları Neden Birleşir?

Hangi margin'ler çöker, hangileri çökmez?

İlk bilinmesi gereken kural, çökmenin yalnızca dikey yönde yaşandığıdır. Yatay yazılan bir sayfada yalnızca üst ve alt margin'ler birleşir; sol ve sağ margin'ler her zaman toplanır. İkinci kural, bazı kutuların margin'lerinin hiçbir zaman çökmemesidir. MDN bunları açıkça sayar:

• Kayan (float) öğeler: float değeri none olmayan öğelerin margin'leri çökmez.
• Mutlak konumlu öğeler: position: absolute (ve aynı şekilde davranan fixed) öğelerin margin'leri başka margin'lerle birleşmez.
• Flex ve grid kapsayıcılarının içi: display değeri flex ya da grid olan bir kapsayıcının içinde margin'ler çökmez.

Yani margin collapsing, blok biçimlendirme bağlamında (block formatting context, BFC) alt alta dizilen normal akıştaki blok kutulara özgü bir davranıştır. MDN'nin normal akış rehberi bunu belirtimden aktarır: Bir blok biçimlendirme bağlamında kutular yukarıdan aşağıya dizilir, aralarındaki dikey mesafeyi margin belirler ve komşu blok düzeyindeki kutuların dikey margin'leri çöker.

Birinci durum: komşu kardeşler

En sık karşılaşılan durum, art arda gelen iki kardeş bloğun birinin alt margin'i ile diğerinin üst margin'inin birleşmesidir. MDN'nin BFC rehberindeki örnekte iki <div> öğesinin her birine margin: 10px 0 verilir ve aradaki boşluğun beklenen 20 piksel yerine 10 piksel olduğu gösterilir.

.mavi,
.kirmizi {
  height: 50px;
  margin: 10px 0;
}
/* mavinin alt margin'i: 10px, kırmızının üst margin'i: 10px
   aradaki boşluk: en büyüğü = 10px (toplam 20px değil) */

<div class="mavi"></div>
<div class="kirmizi"></div>

MDN bu durum için tek bir istisna belirtir: İkinci kardeşin kayan öğelerin altına inmesi için temizleme (clearance) uygulanması gerekiyorsa, yani clear özelliği devreye girip öğeyi aşağı itiyorsa, komşu kardeşlerin margin'leri çökmeyebilir.

İkinci durum: ebeveyn ile ilk ya da son alt öğe

Bu durum en çok şaşırtan durumdur. Ebeveyn blok ile alt öğeleri arasında onları ayıran hiçbir şey yoksa, ebeveynin dikey margin'i ile alt öğenin margin'i birleşir. MDN iki alt durumu tanımlar:

• Üst margin: Ebeveynin margin-top değeri, normal akıştaki ilk alt öğesinin margin-top değeriyle çöker. Bunu engelleyen koşullar: ebeveynde border-top ya da padding-top olması, ebeveynin ilk alt öğeden önce satır içi içerik (örneğin metin) barındırması ya da temizleme (clearance) uygulanması.
• Alt margin: Ebeveynin margin-bottom değeri, normal akıştaki son alt öğesinin margin-bottom değeriyle çöker. Bunu engelleyen koşullar: ebeveynde tanımlı bir height ya da min-height, border-bottom ya da padding-bottom olması.

İki durumda da ebeveyn üzerinde yeni bir blok biçimlendirme bağlamı oluşturmak, ebeveynin margin'lerinin alt öğelerle çökmesini engeller. MDN'nin önemli bir notu daha var: Bu kurallar sıfır margin'ler için de geçerlidir. Yani ebeveynin kendi margin'i 0 olsa bile alt öğenin üst margin'i ebeveynin dışına "taşar". Sonuç olarak alt öğeyi ebeveynin içinde aşağı itmesini beklediğiniz margin, ebeveynin tamamını aşağı iter ve ebeveynin arka planı alt öğenin hemen üstünden başlar.

.hero {
  background: lavender;
  /* margin yok, padding yok, kenarlık yok */
}

.hero h1 {
  margin-top: 40px;
  /* beklenti: başlık mor alanın içinde 40px aşağıda
     sonuç: 40px boşluk mor alanın ÜSTÜNDE oluşur,
     başlık mor alanın tepesine yapışık görünür */
}

<section class="hero">
  <h1>Başlık</h1>
</section>

Bu örnekte .hero ile h1 arasında kenarlık, padding ya da satır içi içerik olmadığı için başlığın 40 piksellik üst margin'i ebeveynin (değeri 0 olan) üst margin'iyle çöker. Birleşen 40 piksel ebeveynin dışında kalır. MDN'nin çok anahtarlı display sözdizimi rehberi de aynı durumu anlatır: Alt öğenin margin'i ebeveynin sınır kutusunun çok üstüne uzanır ve ebeveyni sayfada aşağı iter. Rehber, tarayıcı geliştirici araçlarında alt öğenin kutu modelini incelemenin bunu görmeyi kolaylaştırdığını da belirtir.

Üçüncü durum: boş bloklar

İçinde hiçbir şey olmayan bir blokta kenarlık, padding, satır içi içerik, height ya da min-height yoksa, bloğun kendi üst ve alt margin'i birbirine değer ve çöker. Ardından bu birleşik margin, komşu kardeşlerin margin'leriyle de birleşebilir. Boş bir ayraç <div> ile boşluk yaratmaya çalıştığınızda beklediğinizden az boşluk görmenizin nedeni budur.

.ayrac {
  margin: 30px 0;
  /* içerik, padding, kenarlık, height yok:
     kendi üst (30px) ve alt (30px) margin'i çöker = 30px */
}

p {
  margin: 20px 0;
}
/* p + .ayrac + p dizilişinde: 20px, 30px ve 20px
   margin'lerinin hepsi birleşir, aradaki boşluk 30px olur */

MDN, bu durumların bir araya geldiğinde ikiden fazla margin'in de çökebileceğini belirtir. Yukarıdaki dizilişte ilk paragrafın alt margin'i, ayracın kendi içinde çökmüş margin'i ve ikinci paragrafın üst margin'i tek bir boşluğa iner; sonuç en büyük değer olan 30 pikseldir.

Negatif margin'lerle hesap

Pozitif değerlerde kural basittir: En büyük değer kazanır. Negatif değerler işe karıştığında MDN iki kural verir:

• Pozitif ve negatif karışık: Birleşen margin = en büyük pozitif margin + en küçük (en negatif) negatif margin.
• Hepsi negatif: Birleşen margin = en küçük (en negatif) margin. Bu kural hem komşu öğeler hem iç içe öğeler için geçerlidir.

Son satıra dikkat edin: Negatif değerin mutlak büyüklüğü pozitif değerden büyükse birleşen margin negatif olur ve ikinci blok birinciyle üst üste biner. Negatif margin'ler bilinçli bir örtüşme için kullanılabilir, ama çöken margin'lerle birleştiğinde sonucu tahmin etmek zorlaşır.

MDN örneğini adım adım okumak

MDN rehberindeki örnek üç durumu aynı anda gösterir. Kurallar şöyledir:

div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

<p>Birinci paragraf</p>
<p>İkinci paragraf</p>

<div>
  Ebeveyn metni
  <p>İçteki ilk paragraf</p>
  <p>İçteki son paragraf</p>
</div>

<p>Sonraki paragraf</p>

• İlk iki paragraf arası: Birincinin alt margin'i 1,2rem, ikincinin üst margin'i 0,4rem. Komşu kardeş kuralıyla en büyüğü kalır: 1,2rem.
• İçteki ilk paragrafın üstü: div paragraftan önce metin içerdiği için (satır içi içerik) üst margin'ler çökmez. Paragraf, üstteki metinden 0,4rem uzakta durur.
• İçteki son paragrafın altı: div öğesinde alt kenarlık, alt padding ya da yükseklik olmadığından paragrafın 1,2rem alt margin'i, div öğesinin 2rem alt margin'iyle çöker. Sonuç 2rem'dir ve bu boşluk div öğesinin dışında kalır.
• Sonraki paragraf: Bu 2rem, sonraki paragrafın 0,4rem üst margin'iyle de birleşir. Paragraf div öğesinin 2rem altında görünür.

Çökmeyi önlemenin yolları

Çökme çoğu zaman istenen bir davranıştır: Paragraflar arasında tutarlı bir boşluk sağlar ve ilk ya da son öğenin boşluğunun ikiye katlanmasını engeller. Önlemek istediğinizde ise MDN'deki koşulları tersine çevirirsiniz. Her yöntemin bir yan etkisi olduğu için doğru olanı duruma göre seçmek gerekir.

MDN'nin BFC rehberi, yeni bir blok biçimlendirme bağlamı oluşturmanın margin çökmesini bastırdığını ve bunun en temiz yolunun display: flow-root olduğunu anlatır. Rehber overflow ile BFC oluşturmanın sakıncalarını da sayar: overflow aslında taşan içeriği yönetmek için vardır, istenmeyen kaydırma çubukları ya da kırpılmış gölgeler doğurabilir ve sonradan kodu okuyan birine neden kullanıldığı açık olmayabilir. Bu yöntemi seçerseniz bir yorumla açıklamanızı önerir.

.hero {
  display: flow-root;
  /* yeni BFC: h1 margin'i artık .hero içinde kalır */
  background: lavender;
}

.hero h1 {
  margin-top: 40px;
  /* sonuç: başlık mor alanın içinde 40px aşağıda */
}

Kardeşler arasındaki çökmeyi önlemek için MDN'nin örneği, ikinci kardeşi bir dış kapsayıcıya alıp bu kapsayıcıda overflow: hidden ile yeni bir BFC oluşturmaktır. Böylece içteki öğenin margin'leri dış kapsayıcının margin'leriyle birleşmez ve iki kardeş arasında 10 + 10 = 20 piksel boşluk oluşur. Aynı sonucu overflow yerine display: flow-root ile de alabilirsiniz.

.dis {
  display: flow-root;
  /* MDN örneğinde overflow: hidden kullanılır; ikisi de yeni BFC oluşturur */
}

<div class="mavi"></div>
<div class="dis">
  <div class="kirmizi"></div>
</div>

Bileşenler arasındaki boşluğu tamamen kontrol etmek istiyorsanız kapsayıcıyı flex ya da grid yapıp boşluğu gap ile vermek, margin hesaplarıyla hiç uğraşmamanın yoludur. MDN, margin'lerin flex ya da grid kapsayıcılarında çökmediğini açıkça belirtir. Bu yöntemleri flexbox hizalama ve gap yazısında ve CSS grid rehberinde bulabilirsiniz. BFC'yi oluşturan diğer durumlar display yazısında ele alınıyor.

Teşhis için kısa kontrol listesi

Bir boşluk beklediğinizden küçük ya da yanlış yerdeyse şu soruları sırayla sorun. Her biri MDN'deki bir koşula karşılık gelir.

• İki öğe dikey olarak mı komşu? Yatay komşularda çökme olmaz.
• Öğelerden biri float ya da mutlak konumlu mu? Öyleyse margin'i çökmez.
• Ebeveyn flex ya da grid kapsayıcısı mı? Öyleyse içindeki margin'ler çökmez.
• Boşluk ebeveyn ile ilk ya da son alt öğe arasında mı? Ebeveynde padding, kenarlık, satır içi içerik ya da (alt kenar için) yükseklik var mı?
• Aradaki öğe boş mu? Boş bloğun kendi üst ve alt margin'i de birleşir.
• Değerlerden biri negatif mi? Öyleyse sonuç en büyük pozitif ile en negatif değerin toplamıdır.

Sık yapılan hatalar

• Yatay margin'lerin de çöktüğünü sanmak: Çökme yalnızca dikey yönde olur; sol ve sağ margin'ler toplanır.
• Ebeveynin margin'i 0 olduğu için çökme olmayacağını düşünmek: Kurallar sıfır margin'ler için de geçerlidir; alt öğenin margin'i yine ebeveynin dışına çıkar.
• Boşluğu artırmak için iki öğeye de margin vermek: Komşu kardeşlerde büyük olan kazanır; iki 20 piksel 40 değil 20 piksel eder.
• Sorunu overflow: hidden ile açıklamasız çözmek: Çalışır ama gölgeleri ve taşan içeriği kırpabilir; display: flow-root daha az yan etkilidir.
• Flex kapsayıcıya geçince boşluğun neden büyüdüğünü anlamamak: Flex ve grid içinde margin'ler çökmez, toplanır. Blok düzende 20 piksel görünen boşluk flex düzende 40 piksel olabilir.

Sık Sorulan Sorular

Margin collapsing neden var?

Metin ağırlıklı belgelerde paragraflar, başlıklar ve listeler arasında tutarlı bir dikey ritim sağlar. Örneğin her paragrafın üstünde ve altında aynı margin olduğunda, çökme sayesinde aralarında bu değerin iki katı değil kendisi kadar boşluk oluşur.

box-sizing: border-box çökmeyi engeller mi?

Hayır. box-sizing yalnızca width ve height değerlerinin neyi ölçtüğünü değiştirir; margin'ler zaten bu hesaba dahil değildir. Ayrıntı için box-sizing yazısına bakın.

Flexbox içindeki öğelerde margin çöker mi?

Hayır. MDN, display değeri flex ya da grid olan kapsayıcılarda margin'lerin çökmediğini belirtir. Flex ve grid öğeleri ayrıca kendi içlerinde yeni bir biçimlendirme bağlamı oluşturduğu için alt öğelerinin margin'leri de dışarı taşmaz.

Negatif margin ile çöken margin nasıl hesaplanır?

Pozitif ve negatif değerler karışıksa en büyük pozitif değer ile en negatif değer toplanır. Hepsi negatifse en negatif değer kullanılır. Örneğin 30 piksel ile -10 piksel 20 piksel, -10 piksel ile -25 piksel ise -25 piksel verir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS kutu modeli · display ve flow-root · overflow ve kaydırma · Flexbox hizalama ve gap · CSS sık hatalar