padding Özelliği
padding özelliği, bir elementin iç
boşluğunu ayarlar. Özelliğin değeri olarak
herhangi bir boyut
birimi kullanılabilir. Varsayılan olarak, her tarayıcı
elementlere çeşitli boşluklar ekleyebilir.
Bu özellik,
padding-top,
padding-right,
padding-bottom,
padding-left
özellikleri için bir kısaltmadır.
Sözdizimi
seçici {
padding: değer;
}
Parametre Sayısı
padding özelliği 1,
2, 3 veya 4 değer
alabilir, bu değerler boşlukla ayrılarak listelenir:
| Sayı | Açıklama |
|---|---|
1 |
Tek bir değer, elementin her tarafından boşluk belirler. |
2 |
İlk değer üstten ve alttan boşluğu, ikinci değer ise sağdan ve soldan boşluğu belirler. |
3 |
İlk değer üstten boşluğu, ikinci değer sağdan ve soldan boşluğu, üçüncü değer ise alttan boşluğu belirler. |
4 |
İlk değer üstten boşluğu, ikinci değer sağdan, üçüncü değer alttan, dördüncü değer ise soldan boşluğu belirler. |
Örnek
Bu durumda, varsayılan olarak iç boşluk sıfır olacak ve metin bloğun kenarına yapışık olacaktır:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Örnek
Şimdi iç boşluğu
30px yapalım:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Örnek
Şimdi üstten ve alttan boşluk 20px,
sağdan ve soldan ise 5px olacak:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Örnek
Şimdi üstten boşluk 5px, sağdan -
15px, alttan - 25px, soldan -
35px olacak:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Ayrıca Bakınız
-
dış boşluğu belirleyen
margin
özelliği