İç Kenar Boşluğu – Padding

İç Kenar Boşluğu diğer adı ile Padding özelliği elemanların yazı ile arasında bir tabaka olarak temizler. Bir elamanın yazı ile arasındaki boşluğu beyaz olarak ayarlar. İç Kenar Boşluğu (Padding) arka plan rengi yoktur ve verilememektedir. Bir elemana verilen bu boşluk 4 kenardan verilmektedir ancak isteğe bağlı bu 4 köşeden ayrı ayrı da verilebilmektedir.

padding
padding-top
padding-right
padding-bottom
padding-left

Padding özelliğinde piksel (padding: 20px;), yüzde (padding-left: 20%;), em (padding-right: 2em;) ve rem (padding-top: 1rem;) kullanılabilmektedir. Buna ek olarak ta “auto” özelliği de kullanılabilmektedir. “auto” özelliği kullanıldığında tarayıcı kendi inisiyatifine bağlı olarak her taraftan eşit bir şekilde değer atar. Ve kendi değerlerince boşluk bıraktırır.

CSS Çoklu İç Kenar Boşluğu

Bir elemanın yazı ile kenar arasına farklı Padding değeri vermek mümkündür. Bu değerler farklı da olabilir aynı da olabilir. Değerler verildiğinde elemanın yazı ile arasında verilen değerlere göre boşluk olacaktır.

“padding-top” üst kısım ile yazı arasındaki boşluktan sorumludur. Bu özelliğe verilen değer üst kısımda boşluk bıraktırır.
“padding-right” sağ kısım ile yazı arasındaki boşluktan sorumludur. Bu özelliğe verilen değer sağ kısımda boşluk bıraktırır.
“padding-bottom” alt kısım ile yazı arasındaki boşluktan sorumludur. Bu özelliğe verilen değer alt kısımda boşluk bıraktırır.
“padding-left” sol kısım ile yazı arasındaki boşluktan sorumludur. Bu özelliğe verilen değer sol kısımda boşluk bıraktırır.

div {
    padding-top: 75px;
    padding-right: 65px;
    padding-bottom: 75px;
    padding-left: 65px;
}
div {
    padding-top: 21%;
    padding-right: 19%;
    padding-bottom: 21%;
    padding-left: 19%;
}
div {
    padding-top: 1.25em;
    padding-right: 1.15em;
    padding-bottom: 1.25em;
    padding-left: 1.15em;
}
div {
    padding-top: 1.25rem;
    padding-right: 1.15rem;
    padding-bottom: 1.25rem;
    padding-left: 1.15rem;
}

CSS İç Kenar Boşluğu Kısa Yazım

CSS İç Kenar Boşluğu Kısa Yazımı yukarıda belirtilen değerlerin tek satırda yazmamıza olanak sağlar. Kod kalabalığına bire birdir ve aynı zamanda alandan kazanç sağlanmaktadır. Tüm kenar ile yazı arasındaki boşlukları tek satırda yazılmasını sağlar. İlk parametre üst kısmı temsil eder ikinci parametre sağ kısmı temsil etmekte üçüncü kısım ise alt kısmı ve son olarak ta dördüncü parametre sol kısmı temsil etmektedir.

p {
    padding: 75px 65px 75px 65px; 
}
p { 
    padding: 21% 19% 21% 19%; 
}
p { 
    padding: 1.25em 1.15em 1.25em 1.15em; 
}
p { 
    padding: 1.25rem 1.15rem 1.25rem 1.15rem; 
}