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