CSS Padding Özelliği

Dışı olan her şeyin mutlak içi de vardır.Dış boşlukları ayarlıyoruz peki iç boşlukları nasıl ayarlarız?

CSS Padding Nedir?
Elementler kutu modeline göre belgede belirli bir yer işgal ederler.Bu kutu modelinde elementlerin iç boşluklarına padding denir.Diğer bir deyişle kutu modelinde elementlerin kenarlıklarının iç kısmında kalan saydam boşluğa padding denir.Padding özelliğii borderların içinde kalan boşluğu ayarlamak için kullanılır.

Bir elementin her yönüne özel padding tanımlamak için CSS de 4 tane padding özelliği vardır.

  • padding-top : Üst boşluk
  • padding-right : Sağ boşluk
  • padding-bottom : Alt boşluk
  • padding-left : Sol boşluk

Yukarıdaki tüm padding özellikleri aşağıdaki değerleri alabilir.

  • auto : Boşluk tarayıcı tarafından hesaplanır.
  • lenght : Boşluk için px,em,rem gibi CSS ölçü birimleri ile kullanılır.
  • % : İçeren elementin genişliğinin yüzdesine göre boşluk oluşturur.
  • inherit : Parent elementin padding değerini miras alır.

Örnek Kullanım :

p {
  padding: 0 auto;
}
p {
  padding: 20px 40px;
}
p {
  padding: 0 50%;
}
p {
  padding: inherit;
}

Padding – Kısaltılmış Özellik

Bütün padding özelliklerini tek bir padding özelliği içinde kullanmaya yarar.Aşağıda sıraladığım 4 padding özelliğini aslında sadece padding kısaltılmış özelliği ile oluşturabiliriz.

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

Örnek Kullanım :

div {
 padding: 20px 30px 40px 80px;
}

Bu özellik nasıl çalışır?

Eğer padding özelliği 4 değer almış ise:

padding: 20px 30px 40px 80px;
  • İlk değer(20px) top padding değeridir.Yani padding-top: 20px; değerini temsil eder.
  • İkinci değer(30px) right padding değeridir.Yani padding-right: 30px; değerini temsil eder.
  • Üçüncü değer(40px) bottom padding değeridir.Yani padding-bottom :40px; değerini temsil eder.
  • Son değer(80px) left padding değeridir.Yani padding-left: 80px; değerini temsil eder.

Eğer padding özelliği 3 değer almış ise:

padding: 20px 30px 40px;
  • İlk değer(20px) top padding değeridir.Yani padding-top: 20px; değerini temsil eder.
  • İkinci değer(30px) right ve left padding değerleridir.Yani padding-left :30px; ve padding-right: 20px; değerlerini temsil eder.
  • Son değer(40px) bottom padding değeridir.Yani padding-bottom: 40px; değerini temsil eder.

Eğer padding özelliği 2 değer almış ise:

padding: 40px 50px;
  • İlk değer(40px) top ve bottom padding değerleridir.Yani padding-top: 40px; ve padding-bottom: 40px; değerlerini temsil eder.
  • İkinci değer(50px) right ve left padding değerleridir.Yani padding-right: 50px; ve padding-left: 50px; değerlerini temsil eder.

Eğer padding özelliği tek değer almış ise:

padding: 60px;
  • Bütün padding özelliklerini ifade eder.Yani padding-top: 60px; padding-bottom: 60px; padding-left: 60px; padding-right: 60px; ifadesine karşılık gelir.

CSS padding özelliği elementlerin iç boşluklarını ayarlarmak için kullanılan bir özelliktir.Örnek olarak yazıların olduğu bir alanın sağıdan ve solundan boşluklar olması istendiğinde padding kullanılır.Padding herhangi bir yöne özel olarak kullanıldığı gibi, tek seferde her yöne de uygulanabilir.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin