CSS’de “Margin” Çökmesi (Margin Collapsing)
Margin çökmesi (margin collapsing), CSS’te iki veya daha fazla elementin kenar boşluklarının birleşip tek bir boşluk olarak görünmesi durumudur. Özellikle dikey yönlü margin değerlerinde ortaya çıkan bu durum, kutuların arasındaki boşluğun beklenenden farklı görünmesine yol açmaktadır.
Bu arada “kutu” derken aslında CSS’de box model olarak adlandırılan bir terime atıfta bulunmak istemiştim. Zira HTML’deki tüm elementler aşağıdaki gibi bir kutu olarak düşünülür:
“Margin” Çökmesi
Yukarıdaki resimde de görüleceği üzere HTML elementleri birtakım sınır değerleri olan kutu gibi görülür. HTML elementlerine bu değerler web tarayıcıları tarafından varsayılan olarak atanabildiği gibi bizzat kendimiz de bu değerleri manipüle edebiliriz. İşte tam da bu noktada iki farklı element için manipüle edilmiş “margin” değerler arasında tabiri caizse bir çatışma yaşanır. Bu çatışma sonucunda biri diğeri alt eder. O zaman tanım yaparak bir kez daha bu durumu açıklayalım:
“Margin çökmesi” (margin collapsing), CSS’de block formatting context içinde bulunan dikey blok elementlerin üst ve alt dış boşluklarının (margin) birleşerek tek bir margin gibi davranması durumudur. Bu durum, genellikle iki ardışık blok element arasında beklenenden daha az boşluk oluşmasına yol açar.
<style>
p {
margin-top: 24px;
margin-bottom: 24px;
}
</style>
<p>Paragraf Bir</p>
<p>Paragraf İki</p>
Yukarıdaki örneği incelediğimizde, bir blok elementi olan iki paragraf element arasındaki margin boşluğunun matematiksel olarak 24px + 24px = 48px olması beklenmektedir. Ancak durum bu hesaba göre olmamaktadır.
CSS’de “margin çökmesi” (margin collapsing), birden fazla elementin üst ve alt kenar boşluklarının birleşerek tek bir boşluk gibi görünmesi durumudur. Bu özellik, özellikle blok elementler arasındaki gereksiz diyebileceğimiz boşlukların önüne geçmek için tasarlanmıştır. Örneğin, iki ardışık elementin üst ve alt “margin” değerleri birleşir ve yalnızca en büyük margin değeri uygulanır. Dolayısıyla bu özelliğin doğru anlaşılması, CSS ile daha tutarlı ve öngörülebilir bir tasarım yapmamız için olmazsa olmaz özelliklerden biridir. Aşağıdaki resmi inceleyiniz:
CSS’de “Margin” Çöküşü Kuralları
Margin çökmesi bazı durumlarda ve belirli kurallar ışığında meydana gelmektedir:
1. Margin çöküşü, yalnızca blok seviyeli (block-level) elementlerde (Örneğin: div, h1-h2-h3-h4-h5-h6, p, section vb.) gözlemlenmektedir. Yani bu demektir ki çökme sadece dikey yönlerdeki boşluklarda gerçekleşmektedir. Aşağıdaki resmi inceleyiniz:
2. Dikey “margin”lere sahip iki elementten hangisinin mutlak değeri en yüksekse onun “margin” değeri diğerini çökertir. Bakınız:
3. İlk kuraldan hareketle diyebiliriz ki, yanal (sağ veya sol) margin değerlerinde bir çökme gözlemlenmez. Bu durum aşağıdaki resimde temsili olarak gösterilmiştir. Resimde de görüleceği üzere iki block elementi (display: inline-block; olarak ayarlı) arasındaki yanal margin boşluğu toplamı 5px + 10px = 15px şeklinde olmaktadır.
4. İç içe (nesting) yazılmış elementler de “margin” çökmesinden nasibini alır.
Bu durum, ebeveyn elementin üst veya alt margin değeri ile çocuk elementin margin değerinin birleşmesiyle ortaya çıkar. Özellikle dikey margin değerlerinde bu çökme net bir şekilde görülebilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin Çökmesi Örneği</title>
<style>
.parent {
background-color: lightblue;
margin-top: 50px;
border: 1px solid black;
}
.child {
background-color: lightgreen;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Çocuk Element</div>
</div>
</body>
</html>
“Margin Çökmesi” Hangi Durumlarda Görülür?
1. Ardışık blok elementler: İki blok elementin üst ve alt “margin” değerleri çakışır. Bu durumda, yalnızca en büyük “margin” değeri uygulanır.
<div style="margin-bottom: 20px;">Element 1</div>
<div style="margin-top: 30px;">Element 2</div>
<!-- Toplamda yalnızca 30px margin uygulanır. -->
2. Ebeveyn ve çocuk elementler: Çocuk elementin “margin” değeri, ebeveyn elementin üst veya alt “margin” değeriyle birleşebilir. Bu durumda, yalnızca en büyük “margin” değeri kullanılır.
<div style="margin-top: 20px;">
<div style="margin-top: 30px;">Çocuk Element</div>
</div>
<!-- Yalnızca 30px margin uygulanır. -->
3. Boş blok elementler: İçeriği olmayan bir blok elementte, üst ve alt “margin” değerleri birleştirilerek tek bir “margin” gibi davranır.
<div style="margin-top: 20px; margin-bottom: 30px;"></div>
<!-- Yalnızca 30px margin uygulanır. -->
“Margin Çökmesi” Hangi Durumlarda Görülmez?
1. “Flexbox“ kullanımı: Flex düzeninde, her flex item bağımsızdır ve “margin” çökmesi meydana gelmez.
.flex-container {
display: flex;
flex-direction: column;
}
2. “Grid“ kullanımı: “Grid” düzeninde her hücre bağımsız bir alan olarak ele alındığından “margin” değerleri çakışmaz.
.grid-container {
display: grid;
grid-template-rows: auto auto;
}
3. position: absolute veya position: fixed Kullanımı: Bu konumlandırma yöntemleriyle elementler flow layout dışına çıkar ve “margin” çökmesi yaşanmaz.
.absolute {
position: absolute;
top: 10px;
}
4. “Padding“ veya “Border“ Kullanımı: Ebeveyn elemente “padding” veya “border” eklemek “margin” çökmesini engeller.
.parent {
padding-top: 10px;
border: 1px solid black;
}
5. “Overflow“ ayarları: Ebeveyn elementte overflow: hidden veya overflow: auto gibi bir özellik tanımlandığında “margin” çökmesi oluşmaz.
.parent {
overflow: hidden;
}