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.
ş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.
ş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
Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.
18380 kez okundu.