CSS’de “Padding” Özelliği Kullanımı
Bu yazımızda, web tasarımında sıkça karşılaştığımız ve elementlerin content (içeriği) ile border (kenar çizgisi) arasında boşluk oluşturmamıza yardımcı olan CSS “padding” özelliği hakkında detaylı bir yazı hazırladık.
“Padding” Özelliği
CSS “padding” özelliği, bir öğenin içinde kalan boşlukları belirlemek için kullanılır. Bu boşluk, öğenin içeriği (content) ile sınırları (border) arasındaki mesafeyi tanımlar. CSS’deki kutu modeline baktığınızda “padding”in nasıl bir boşluğu temsil ettiğini görebilirsiniz:

Kutu modelinde, “padding” özelliği ilgili elementin “border“ özelliğinden önce yer alır. “Padding” için kullanılan “değerler” aşağıdaki gibidir:
... {
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
}
padding-top: value;
İlgili elementin üst kısmında oluşacak iç boşluğu tanımlar.padding-right: value;
İlgili elementin sağ kısmında oluşacak iç boşluğu tanımlar.padding-bottom: value;
İlgili elementin alt kısmında oluşacak iç boşluğu tanımlar.padding-left: value;
İlgili elementin sol kısmında oluşacak iç boşluğu tanımlar.
Padding değerlerinin ayarlanması esnasında, px
, pt
, cm
gibi çeşitli ölçü birimleri kullanabilirsiniz. Bu birimler, elementin boyutunu belirlemekte kullanılan standart ölçü birimleridir ve kullanıcıların ihtiyacına göre seçilebilirler. Ayrıca, padding için yüzde (%
) oranında boşluk verilebilir. Bu yüzde oranı, taşıyıcı elementin genişliği ile şekillenir. Tarayıcı, bu değeri otomatik olarak algılayıp, cihazın ekran genişliğine göre ayarlamaktadır.
“Padding” Özelliğinin Tek Satırda Yazımı (Padding Shorthand)
/* Uzun Yazım */
div {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 5px;
}
Yukarıdaki kodu incelediğimizde, padding özelliklerinin dört satırda yazıldığı görülmektedir. Bu özellikleri her seferinde ayrı ayrı yazmak yerine, CSS bize bu bilgileri padding
özelliği ile tek bir satırda tanımlama olanağı sunar. Böylece CSS kodunun daha okunabilir ve sade olması sağlanır.
Saat yönünde gidecek şekilde sırasıyla üst, sol, alt ve sağ margin özelliklerine tek satırda yazılacak şekilde değerler atanabilir:
/* Uzun Yazım */
div {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 5px;
}
/* Kısa Yazım */
div {
padding: 20px 15px 10px 5px;
}
CSS kodlarında padding değerlerini aşağıdaki şekilde yazabiliriz:
padding: 20px;
- her yönden 20px boyutunda padding ayarlanır.
padding
: 20px 40px 80px 100px;- üst (top) padding 20px boyutunda ayarlanır.
- sağ (right) padding boyutu 40px ayarlanır.
- sol (left) padding boyutu 80px olarak ayarlanır.
- alt (bottom) padding 100px boyutunda ayarlanır.
padding
: 20px 40px 80px;- üst (top) padding 20px boyutunda ayarlanır.
- sağ (right) ve sol (left) padding boyutları 40px ayarlanır.
- alt (bottom) padding 80px boyutunda ayarlanır.
padding
: 20px 40px;- üst (top) ve alt (bottom) padding boyutları 20px olarak ayarlanır.
- sağ (right) ve sol (left) padding boyutları 40px olarak ayarlanır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Padding Örnekleri</title>
<style>
div {
border: 5px solid black;
background-color: #104B79;
color: #fff;
margin: 10px;
}
div.ornek1 {
padding: 25px 50px 75px 100px;
}
div.ornek2 {
padding: 25px 50px 75px;
}
div.ornek3 {
padding: 25px 50px;
}
div.ornek4 {
padding: 25px;
}
</style>
</head>
<body>
<h2>Kısa Yazım CSS Padding Örnekleri</h2>
<div class="ornek1">İçerik taşıyıcı kutu: padding: 25px 50px 75px 100px;</div>
<div class="ornek2">İçerik taşıyıcı kutu: padding: 25px 50px 75px;</div>
<div class="ornek3">İçerik taşıyıcı kutu: padding: 25px 50px;</div>
<div class="ornek4">İçerik taşıyıcı kutu: padding: 25px;</div>
</body>
</html>
❗ “Padding” özelliği, HTML’deki tüm elementlerde çalışan bir CSS özelliğidir. Bu yönüyle margin, width ve height özelliklerinden farklı olarak “display” özelliği her ne olursa olsun uygulanır. Yani, hangi HTML elementi olursa olsun “padding“ değeri etkili olacaktır.