Css Box Model (Kutu Modeli) Özellikleri

Margin, Padding ve Border Kullanımı

Özellikle divleri kullanarak tablosuz tasarım yapılırken kutu özellikleri çok iyi ayarlanmalıdır.

Çok yapılan bir hata yan yana konulan kutuların toplam genişliklerini hesaplarken, sadece width özelliklerini toplamaktır.

Şunu anlamak çok önemlidir: width özelliği bir etiketin içindeki yazılabilir alanın genişliğidir. Width değerine kenarlıklar ile, iç ve dış boşlukların kapladığı yer dahil değildir.

Örneğin bir kutunun ekranda kaplayacağı toplam genişliği şu şekilde hesaplamalıyız:

Toplam genişlik = width + margin (sol ve sağ) + padding (sol ve sağ) +border (sol ve sağ) 

Margin

Kutunun etrafındaki dış boşluğudur. Yani kutunun etrafındaki nesneler ile kutunun kenarlığı arasında bırakılacak boşluğu ayarlar.

margin:3px;
şeklinde kullandığımızda tüm yönlerden 3px boşluk bırakılır. Sadece altan, üstten, soldan veya sağdan boşluk ayarlamak istersek aşağıdaki gibi kullanabiliriz:
 
margin-top (üst kenar dışı boşluğu) 
 
margin-right (sağ kenar dışı boşluğu) 
 
margin-bottom (alt kenar dışı boşluğu) 
 
margin-left (sol kenar dışı boşluğu) 
 

Padding

Kutunun iç boşluğudur ve kutu içindeki nesnelerin kenarlığa ne kadar uzakta duracağını belirler.

padding:3px;
şeklinde kullandığımızda tüm yönlerden aynı miktarda iç boşluk bırakılır. Sadece altan, üstten, soldan veya sağdan boşluk ayarlamak istersek aşağıdaki gibi kullanabiliriz:
 
padding-top (üst kenar içi boşluğu) 
 
padding -right (sağ kenar içi boşluğu) 
 
padding -bottom (alt kenar içi boşluğu) 
 
padding -left (sol kenar içi boşluğu) 
 

Border

Kenarlıkların kalınlık, stil ve rengini belirlemeye yarar.

Aşağıdaki gibi bir kullanım ile tüm kenarlıkların kalınlık, stil ve rengi bir satırda belirlenebilir:

border: 2px dotted #022163;

Sağ, sol, üst ve alt kenarlıkların stilini farklı yapmak için:

border-top-style     
 
border-right-style  
 
border-bottom-style  
 
border-left-style 

Tüm kenarlıkların rengini farklı yapmak için:

border-top-color   
 
border-right-color  
 
border-bottom-color   
 
border-left-color   

Tüm kenarlıkların kalınlığını farklı yapmak için:

border-top-color   
 
border-right-color  
 
border-bottom-color   
 
border-left-color   

özellikleri kullanılır.

Aşağıdaki gibi bir kullanım ise kenarlıkların herhangi birinin stil kalınlık ve rengini bir defada belirlemeye yarar:

border-top: 1px solid #ccc;

Bildiğiniz gibi bir tabloya kenarlık verildiğinde iç ve dış olarak iki çizgi oluşmaktadır. Bunu önleyip tablo ve hücre kenarlıklarının tek çizgiden oluşmasını istersek aşağıdaki css ifadesini kullanabiliriz:

Border-collapse:collapse;

 

Örnek: Özellikleri şu şekilde olan bir kutu toplamda kaç px yer kaplar?

Margin-Left: 0px; Margin-Right: 5px; Padding: 8px; Border:1px; Width: 250px;

Toplam Genişlik: 250 + 8 + 8 + 5 + 0 + 1 + 1 = 273px

 

Örnek: Özellikleri aşağıda verilen kutunun toplamda kaplaması gereken yer 400px ise içerik genişliği en fazla kaç olmalıdır?

Margin-Left: 10px;

Margin-Right: 5px;

Padding: 7px;

Border: 0px;

Width: ?

Width = 400 – ( 10 + 5 + 7 + 7 + 0 + 0 ) = 400 – 29 = 371px

kutuların toplam genişliği kapladığı yer, css tablosuz tasarım, margin padding hesaplama, width genişlik hesaplama, css box model, divleri yerleştirme

KONU İLE İLGİLİ ÖRNEKLER

Div ile Yapılmış Sayfa Örneği ve Kodları Kendin Dene

div ile sayfa oluşturma

Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.



YORUMLAR




12239  kez okundu.

Online Kullanıcı Sayısı 543