Kenar boşluğu çökmesi nedir? Kenar boşluğu nasıl meydana gelir ve nasıl çözülür? Bu makalede bu sorulara cevap bulacağız.

Kenar boşluğu çökmesini W3C bitişik kenar boşluğu olarak tanımlar. İki veya daha fazla kutunun(sonraki bir nesne veya kutu olabilir)arasındaki boşluğun tek kenar boşluğu şeklinde görünmesidir.

Bu sorun aslında bir hata olarak kabul edilmemelidir Belkide CSS ile sayfa kodlarken karşılaştığımız ve farklı yöntemlerle çözdüğümüz bu soruna burada açıklık getirmeye çalışacağım.

Sorun tam olarak; iki veya daha fazla kutu arasında dikey kenar boşluğu(margin) değeri ataması yaptığımızda dikey kenar boşluklarının biri etki etmez biz sadece bir kenar boşluğunu görürüz. Buna kenar boşluğu çökmesi denir. Bu kenar boşluğu değerlerinden küçük olan çöker, büyük olanın değeri görünür. Kenar boşluğu çökmesi bir kaç farklı durumda meydana gelir. Bunları sırası ile inceleyelim.

1- İki Blok-level Element Arasında Meydana Gelen Çökme

Kenar boşluğu uygulanmış iki blok-level elementin dikey kenar boşluğunda bir çökme meydana gelir. Bir örnek yapalım.

Html kodu:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p>
<p>Morbi eros lacus, volutpat at, interdum nec, dignissim at, turpis.</p>

CSS kodu:

p{
	margin:10px 0;
}

Örneği görmek için tıklayınız.

Bu kodu uyguladığımızda normalde aşağıdaki Resim-1′deki gibi bir görüntü elde etmemiz gerekirken, kodu çalıştırdığımızda Resim-2′deki görüntüyü alırız.

Resim -1 Olması gereken kenar boşluğu          

Resim – 2 Görünen kenar boşluğu görünümü         

Çözüm: Çözüm için bir kaç yöntem var ben burada bir tanesi örnek olarak vereceğim, ayrıca makalenin sonundaki çözümlerde göz atmanızda yarar var.

p{
	margin:10px 0;
    float:left;
    clear:both;
    width:100%
}

Bu kodlar sonrasında resim-1 deki görüntüyü alırız.

2- Kenar Boşluğu Uyulanmış İç içe Bulunan Elementler Arasında Meydana Gelen Çökme

Bir elemente ve içindeki elemente kenar boşluğu atadığımızda içte kalan elementin kenar boşlukları kaybolacaktır. Bir uygulama yapalım:

*{
    margin:0;
    padding:0;
}
div#kapsul{
    margin:10px;
    background-color:#0066CC;
}
p{
    margin:10px;
    background-color:#0CF;
}

Html kodu yazalım:

<div id="kapsul">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Örneği görmek için tıklayınız.

Örnekte gördüğümüz gibi paragrafın kenar boşluk değerleri görünmemektedir. Sadece dıştaki kapsul nesnesinin üst ve alt kenar boşlukları etki etmektedir.

Resim -1 Görünen kenar boşluğu        

Resim – 2 Olması gereken kenar boşluğu

Çözüm: Bu tip kenar boşluğu çökmelerinde 1px’lik bir padding eklersek ve paragrafın kenar boşluk değerini de 1px azaltırsak sorun çözülür. Kodu aşağıdaki gibi değiştirirsek sorunumuz hallolacaktır.

*{
    margin:0;
    padding:0;
}
div#kapsul{
    margin:10px;
    padding:1px;
    background-color:#0066CC;
}
p{
    margin:9px;
    background-color:#0CF;
}

3- Sadece İçteki Elemente Kenar Boşluğu Uyulanmış İç içe Bulunan Elementler Arasında Meydana Gelen Çökme

Diğer bir kenar boşluğu çökmesi görülen durumda yukarıdaki gibi içiçe durumda olan nesnelerden içteki paragrafta bir kenar boşluğu ataması varken(margin:10px) dıştaki kapsul nesnesinin kenar boşluğu değerinin sıfır olması durumunda meydana gelir. İçteki elementin dikey kenar boşlukları çökecektir.

*{
    margin:0;
    padding:0;
}
div#kapsul{
    margin:0;
    background-color:#0066CC;
}
p{
    margin:10px;
    background-color:#0CF;
}

Html kodu yazarsak:

<div id="kapsul">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Resim -1 Görünen kenar boşluğu        

Resim – 2 Olması gereken kenar boşluğu     

Örneği görmek için tıklayınız.

Çözüm: Bu durumda padding veya kenarlık(border) ataması yaparsak sorunumuz çözülecektir.

Sonuç ve Çözüm Önerileri

Yukarıda bazı çözüm önerileri sundak, ayrıca kenar boşluğu çökmesi hakkındaki aşağıdaki bilgilerde bize çözüm konusunda yardımcı olacaktır.

• Normal akışa sahip dokümanlardaki blok-level bir kutuda dikey kenar boşluğu çökmesi olur.
• Float uygulanmış nesnelerde çökme olmaz.
• Konumlandırma atamaları(position:absolute ve postion:relative) yapılmış nesnelerde çökme olmaz.
• overflow uygulanmış nesnelerde ve alt elementlerinde çökme olmaz.
• inline-block elementlerde çökme olmaz.
• html ve body elementlerine uygulanan kenar boşluğunda çökme olmaz.

Kaynaklar

• http://www.w3.org/TR/CSS21/box.html#collapsing-margins
• http://www.andybudd.com/archives/2003/11/no_margin_for_error/
• http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/
• http://www.ryznardesign.com/web_coding/tests/2004/preventing_margin_collapse.html
• http://maxdesign.com.au/presentation/workshop/slide46.htm
• http://reference.sitepoint.com/css/collapsingmargins
• http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:

Margin’ler her zaman transparandır. Border’lar üç şekilde( solid, dashed ve dotted) olabilir. Background sadece border içerisine uygulanabilir, yani padding ve içerik alanı kısmını içerir.

Bir elementin toplam genişliği; sol+sağ marginleri, sol+sağ padding’leri, sol+sağ border’ları ve elementin içeriğini kapsar. Margin’ler, padding’ler ve border’lar opsiyonel elementlerdir fakat başlangıçta bunların değerleri ’0′ olarak belirlenmiştir. Yükseklik içinde durum aynıdır. üst-alt margin değerleri, üst-alt padding değerleri, üst-alt border değerleri ve içerik alanı yükseliği toplamı yükseklik değerini oluşturur.

Box modeli iki elementi bulunur. Blok-level elementler ve inline-level elementler.

Blok-level elementler : Blok-level elementin görünüş formatı bir kutu gibidir. Blok-level elementler inline elementleri ve diğer blok-level elementleri içerebilir. Tipik özellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li vd.

Inline-level Elementler : Inline elementler bir içerik gibi görünür, diğer bir inline elelementi veye bir metni içere bilir. Genelde yeni satır veya boşluk oluşturmazlar. Örnek: a, strong, span vd.

Tüm kutu modelleri aşağıdaki bölümleri içerir:

İçerik Alanı: Elementin asıl içeriğini oluşturan kısmıdır. Metin ve nesneler içerir.

Padding : Elementin kenarındaki dolgu alanıdır.

Border : Elementin kenarlıklarıdır.

Margin: Elementin kenar boşluklarıdır.

Box Model Sorunu ve Çözümü

W3C’ye göre genişlik(ve yükseklik) değeri içerik alanı değeridir. padding ve border değerleri buna ek olarak toplam kutu genişliğine eklenir. Eğer toplam kutu değeri eklenecekse içerik alanı ve etrafındaki padding ve border değerleri toplamıdır.

Buraya kadar çok güzel ancak tüm web tarayıcıları bu durumu aynı şekilde yorumlamaz. IE’un IE6/strict’den önceki versiyonları yukarıda anlattığımız standart yorumun dışına çıkar, genişlik veya yükseklik değeri tüm kutu model element değerini ifade eder. Yani tüm padding ve border değerlerini içerir kalan kısmıda içerik alanı değeri olarak belirlenir.

#icerik{
    width:200px;
    padding:10px;
    border:5px solid #000;
}

Standart web tarayıcıları bu durumu şöyle yorumlayacaklardır.

200px + 10px sol kenar iç boşluğu + 5px sol kenar çizgisi + 10px sağ kenar iç boşluğu + 5px sağ kenar çizgisi = 230px toplam genişlik

kutu elemetinin genişliği 230px olacaktır.

Ancak IE‘un IE6/strict’den önceki versiyonlar için kutu elementinin genişlik değeri 200px’dir.

Margin(Kenar dış boşluğu) değeri width değerini direk etkilemese de dolaylı olarak etkiler. Kutular arasındaki genişliği hesaplarken margin değerlerinide dikkate almalıyız. CSS ile sayfa yapıların oluştururken kenar dış boğluklarını(margin) da dikkate elmalıyız.

Bu sorunun çözümü için üretilmiş bir çok yöntem vardır. Ancak bence en sağlamı tantek‘in ürettiği koddur ve burada bundan bahsedeceğim.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}

Burdaki ilk genişilk değeri(2. satırdaki) IE’un IE6/strict’den önceki versiyonların yorumlayacağı genişlik değeri, ikinci genişlik değeri(7. satırdaki) ise standart yorumu destekleyen web tarayıcılarının kullanacağı değerdir.

Bu kodlamada son olarak Opera 5 için bir kod ekleyeceğiz.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}
html>body #icerik {
	width:200px;
}

Not: Aynı şeyler yükseklik(height) içinde geçerlidir.

Kaynaklar

• http://tantek.com/CSS/Examples/boxmodelhack.html
• http://css-discuss.incutio.com/?page=BoxModelHack
• http://www.createwebmagic.com/css101/lesson2/?inc=part3
• CSS Hacks and Filters : Making Cascading Stylesheets Work