CSS Kutu Modeli ve Margin/Padding

Hazırlayan: Semih Akbaş

Tüm CSS ve HTML elemanları birer kutu olarak düşünülebilir.

CSS'te tasarım ve düzenden bahsediliyorsa, "Kutu Modeli" terimi kullanılır.

CSS Kutu Modeli esasında HTML bileşenlerinin etrafını saran ve margin (kenar mesafesi), border (sınır), padding (boşluk) ve content (içerikten) oluşan elemanlardan ibarettir.
CSS Kutu Modeli, bize elemanların etrafına bir sınır ekleme (border) ya da elemanlar arasında bir boşluk (padding) tanımlama olanağı sağlar.

Kutu modeli margin,padding,border ve içerikten(content) oluşur.

Content: Resim ve metnin görüneceği kutunun içeriğidir.
Padding: İçerik etrafında bir alanı temizleyerek boşluk oluşturur. Padding daima saydamdır.
Border: Boşluk ve içeriğin etrafında yer alan sınır çizgisidir.
Margin: Sınırın dışında kalan alandır. Daima saydamdır.

Örnek 1:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: red;

width: 400px;

padding: 30px;

border: 22px solid navy;

padding: 25px;

}

</style>

</head>

<body>

<div>Türk Milleti bağımsız yaşamış ve bağımsızlığı varolmalarının yegâne koşulu olarak kabul etmiş cesur insanların torunlarıdır. Bu millet hiçbir zaman hür olmadan yaşamamıştır, yaşayamaz ve yaşamayacaktır.<br>Mustafa Kemal Atatürk</div>

</body>

</html>

Örnek 2:

Kutu modelinin gösterimi:

div {

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

}

Bir Elemanın Genişliği ve Yüksekliği

Bir elemanın genişliğini ve yüksekliğini tüm tarayıcılarda doğru bir şekilde ayarlamak için kutu modelinin nasıl çalıştığını bilmeniz gerekir.

Önemli!: Bir elemanın genişlik ve yükseklik özelliklerini CSS ile ayarladığınızda, sadece içerik alanının genişlik ve yüksekliğini ayarlarsınız . Bir öğenin tam boyutunu hesaplamak için dolgu, kenarlıklar ve kenar boşlukları da eklemelisiniz.

Örnek 3:

Bu <div> öğesinin toplam genişliği 350px olacaktır:

div {

width: 350px;

padding: 20px;

border: 15px solid gray;

margin: 0;

}

Hesaplamasıysa aşağıdaki gibi olmalıdır.

350 piksel (genişlik)

+ 40 piksel (sol + sağ dolgu)

+ 30 piksel (sol + sağ kenarlık)

+ 0 piksel (sol + sağ kenar boşluğu)

= 420 piksel

Bir elemanın toplam genişliği şu şekilde hesaplanmalıdır:

Toplam öğe genişliği = genişlik + sol dolgu + sağ dolgu + sol kenarlık + sağ kenarlık + sol kenar boşluğu + sağ kenar boşluğu

Bir elemanın toplam yüksekliği şu şekilde hesaplanmalıdır:

Toplam öğe yüksekliği = yükseklik + üst dolgu + alt dolgu + üst kenarlık + alt kenarlık + üst kenar boşluğu + alt kenar boşluğu