Padding
Türkçe anlamı malumunuz dolgu demektir. Padding özelliğinin mantığı için şunu düşünün, bir arsanız var ve ev yapacaksınız. Arsanızın bir kare olduğunu ve her bir kenarının 10 metre olduğunu düşünün. Bu arsanın alanı doğal olarak 100metre kare yapar. Bu arsaya bir ev yaptığınızda net daire alanı hiç bir zaman 100metre kare olamaz. Çünkü kullandığınız tuğla, tuğlanın üstüne sıva belki sıvanın üzerine mantolama veya yalıtım malzemesi vs net alanı düşürecektir. İşte bu kullanılan malzemenin arsanın çevre kenarlarından içeri doğru olan kalınlığı, dolgusuna padding diyoruz.
CSS’de padding herhangi bir HTML etiketinin sınırlarından içeriye doğru verilen boşluk (dolgu) kısmına denir. Aşağıdaki örnekleri incelediğinizde dolgu malzemesi açık mavi renkle anlatılmaya çalışılmış, genel stil atamaları aşağıda belirtilmiştir.
<!DOCTYPE html> <html> <head> <title>Padding (Dolgu) Özellikleri</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box1"> <h2>Herhangi bir padding uygulanmadı</h2> </div> <hr> <div class="box2"> <h2>Her yöne 20px'lik bir padding uygulandı</h2> </div> <hr> <div class="box3"> <h2>Yönlere ayrı ayrı padding uygulandı üst:20px sağ:40px alt:10px sol:50px</h2> </div> <hr> <div class="box4"> <h2>Kısa yazım metoduyla herbir yöne ayrı padding atama</h2> </div> <hr> <div class="box5"> <h2>her yöne 50 px padding box-sizing özelliğinin border-box değeri</h2> </div> </body> </html>
h2, hr{
margin:0px;
padding: 0px;
}
h2{
background-color: white;
}
div{
border:1px solid red;
background-color: lightblue;
width: 600px;
}
Yukarıdaki style.css dosyasında örneklerin daha net anlaşılabilmesi için bazı stil atamaları yapılmıştır. <h2> ve <hr> etiketlerine basit bir css reset uygulanarak margin ve padding değerleri sıfırlanmıştır. <h2> etiketinin bir div classı içinde daha net görülmesi açısından arka plan rengi beyaz olarak tasarlanmıştır. Index.html dosyasının içindeki tüm div etiketlerin sınırlarına kolay gözükmesi ve anlaşılır olması açısından 1px kalınlığında kırmızı renkli düz çizgi kenarlık eklenmiş, div etiketleri içinde uygulanan padding değerlerinin net gözükmesi için açık mavi renkte arkaplan rengi atanmıştır. Son olarak verilen padding değerlerinin ana kutucuğumuzu nasıl genişlettiğinin anlatılması maksadıyla örneklerdeki tüm div etiketlerine width özelliği ile 600px’lik genişlikler uygulanmıştır.
Her Yöne Aynı Padding Değeri Verilmesi
Padding özelliği de diğer özelliklerde olduğu gibi tek argümanın kullanılması her yöne aynı değerin uygulanacağı anlamına gelir.
.box2{
padding: 20px;
}
Her Bir Yöne Ayrı Ayrı Padding Değeri Verme
Padding değerlerini her bir yöne ayrı ayrı vermek margin özelliği ve diğer özelliklerde de olduğu gibi padding- top|right|bottom|left şeklinde belirtilmelidir.
.box3{
padding-top: 20px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 50px;
}
Yukarıdaki örnekte top(üst) padding (dolgu) değeri 20px, sağ 40px, alt 10px, ve sol padding değeri 50px olarak verilerek stil ataması yapılmıştır.
Her Bir Ayrı Yöne Padding Değeri Verilmesi Kısa Kullanım
Bir önceki örnekteki gibi, kısa yazım metoduyla padding değeri vermek mümkündür. Padding özelliği 4 argüman değer alabilir. Standart saat kuralını işlettiğimizde üst kenar dolgusundan (padding) başlayarak saat yönünde dönerek, sağ kenar, alt kenar ve sol kenar olarak uygulanır.
.box4{
padding: 20px 40px 10px 50px;
}
Örnekte saat kuralı işletildiğinde üst kenar padding değeri 20px, sağ kenar padding değeri 40px, alt kenar padding değeri 10px, son olarak sol kenar padding değeri 50px olarak uygulanmıştır.
Eğer padding özelliği 4 argümandan daha az bir argümana sahip olsaydı (2 veya 3 argüman), birçok CSS konusu anlatırken söylediğimiz gibi 4 argüman varmış gibi üstten başlar saat yönünde döner, verilmemiş argümanlara denk gelen kenarlar karşı kenarının değerini alır. Padding: 20px 10px 30px; gibi bir örnekte üst kenar dolgusu 20px, sağ kenar 10px, alt kenar 30px olarak atanır. Değeri belirtilmemiş sol kenar ise sağ kenarın değerini alarak 10 px olarak padding değeri uygulanır.
Box-sizing Özelliği Border-box Değeri
Bu konu içinde buraya kadarki örnekleri incelediğimizde karşımıza çıkan görüntüde ilk örnek olan .box1 classına sahip <div> etiketinin genişliğinin 600px olduğu, diğer örneklerde ise genişliğin tüm <div> etiketlerine 600px olarak atanmış olmasına rağmen genişliklerinin arttığı görülmektedir. Bunun sebebi verilen padding değeri kendi sınırlarını korumaz ve sağ sol padding değerleri toplamı kadar genişleyecektir. Bahse konu <div> etiketinin genişliğini 600px veya verilen değerde sabit tutmak için box-sizing: özelliği kullanılır. Bu özelliğe ait değer border-box verildiği taktirde uygulanan padding (dolgu) işleminin sınırlarını genişletmediğini ancak <div> etiketi içinde bulunan <h2> etiketini daraltarak bu özelliği gerçekleştirmektedir.
.box5{
padding: 50px;
box-sizing: border-box;
}
Yukarıdaki örnekte <div> etiketine ait sınırların 600px değerinde sabit kaldığı ve ilk örnekte padding özelliği uygulanmayan örnekle genişliğin aynı olduğu görülmektedir.
Bir önceki CSS3 ve HTML Dersleri | Margin Özelliği konulu yazıma ulaşmak için tıklayınız…
Son Yorumlar