CSS Dersleri Bölüm 9 –Kutu modeli
Bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…
Tüm HTML elemanları kutu olarak düşünülebilir. CSS’te, “box model”(kutu modeli) terimi tasarım ve düzen hakkında konuşulduğunda kullanılır.
CSS box model HTML elementlerini saran bir kutu aslında ve margin’e(dış boşluk), border’a(kenar/çerçeve), padding’e(iç boşluk, içeriğin uzaklığı)ve asıl içeriğe(content) dayanır.
Box model elementlerin etrafına sınır çekmemize izin verir ve ilgili elementlere yakın konumlarına boşluklar koymamızı sağlar.
Alttaki resim kutu modelini anlatmaktadır:
Farklı bölümlerin açıklaması:
- Margin – border’ın yani çerçevenin etrafını temizler ya da boşluk bırakır-boşaltır- da denilebilir. Margin arkaplan rengine sahip değildir, tamamen transparandır. Bizler okulda kompozisyon yazarken A4 kağıdın her tarafında 5 cm boşluk bırakırız ve içerik o boşluklarda yer almaz. İşte o boşluk margin’dir.
- Border – Bir border padding(içeriği uzaklaştıran boşluk) ve content.(içerik) i de içine alan bir sınırdır. Border kutunun arkaplan renginden etkilenir.
- Padding – Content’in yani içeriğin çevresindeki alanı boşaltır ya da temizler. Padding kutunun arkaplan renginden etkilenir.
- Content – Kutunun içeriğidir yazılar ve resimler burada görünür.
Tüm tarayıcılarda doğru bir şekilde gözükmesini sağlayabilmeniz için box model’in nasıl işlediğini bilmeniz gerekmektedir.
Bir elementin Width ve Height değerleri(Genişlik ve yükseklik)
Önemli:Css ile bir elementin genişlik ve yükseklik değerlerini belirttiğinizde sadece içeriğin yer alacağı alanın genişlik ve yüksekliğini belirtmiş oluyorsunuz. Bir elementin tam kapladığı alanı bilebilmek için padding, border ve margin değerlerini de eklemelisiniz.
Aşağıdaki örmekte bir elementin toplam genişliği 300px’dir:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Şimdi ölçelim:
250px (width yani genişlik)
+ 20px (sol ve sağ padding yani iç boşluk)
+ 10px (sol ve sağ çerçeve yani border)
+ 20px (sol ve sağ margin yani dış boşluk)
= 300px toplamda
250px’e sahip olduğunuzu düşünün boşluğu ile beraber. Toplam width değeri 250px olan bir element oluşturalım:
Örnek
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
Daima bir elemente ait toplam genişlik şöyle hesaplanmalı:
Toplam element genişliği/width = width(genişlik) + left padding(sol iç boşluk) + right padding(sağ iç boşluk) + left border(sol çerçeve) + right border(sağ çerçeve) + left margin(sol dış boşluk) + right margin(sağ dış boşluk)
Daima bir elemente ait toplam yükseklik de şöyle hesaplanmalı:
Toplam element yüksekliği/height = height(yükseklik içeriğe ait olan yani) + top padding(tepe iç boşluğu) + bottom padding(taban iç boşluğu) + top border(tepedeki çerçeve) + bottom border(tabandaki çerçeve) + top margin(tepedeki dış boşluk) + bottom margin(tabandaki dış boşluk)
Herşey bu kadar basit!
Browsers Compatibility(Tarayıcıların uyumluluğu) konusu
Bir önceki örneği Internet Explorer’da test ettiyseniz, toplam genişliğin tam olarak 250 pc olmadığını görmüşsünüzdür.
IE8 ve önceki versiyonları padding ve border’ı width’in içine dahil eder width özelliğine değer verildiğinde,tabi döküman tipi belirtilmediyse. Döküman tipini ise Microsoft Expresion Studio ya da Adobe Dreamweaver gibi bir editör kullandığınızda otomatik olarak ekliyor olursunuz.
Problemi çözmek için,sadece DOCTYPE kodunu ekleyin belgenin başına aşağıdaki gibi:
Örnek
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>