CSS İç Boşluk (Padding)

CSS İç Boşluk (CSS Padding)

CSS iç boşluk (padding) özellikleri, bir öğenin içeriğinin çevresinde, tanımlanmış herhangi bir sınırın veya sınırların içinde boşluk oluşturmak için kullanılır.

CSS ile iç boşluk (padding) üzerinde tam kontrole sahip olursunuz. Bir elemanın her bir tarafı (üst, sağ, alt ve sol) için, iç boşluk (padding) ayarlamak için özellikler vardır.

İç Boşluk - Tek Taraflar (Padding - Individual Sides)

CSS, bir öğenin her bir tarafı için iç boşluğu (padding) belirtmek için özelliklere sahiptir:

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

Tüm iç boşluk (padding) özellikleri aşağıdaki değerlere sahip olabilir:

• Uzunluk (length) - px, pt, cm, vb. cinsinden bir iç boşluk (padding) belirtir.
• % - içeren öğenin genişliğinin %'si olarak bir iç boşluk (padding) belirtir.
• Devral (inherit) - iç boşluğun (padding) üst öğeden devralınması gerektiğini belirtir.

Not: Negatif değerlere izin verilmez.

Örnek: 

Bir

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

İç Boşluk Steno Özelliği (Padding - Shorthand Property)

Kodu kısaltmak için tüm iç boşluk (padding) özelliklerini tek bir özellikte belirtmek mümkündür.

İç boşluk(padding) özelliği, aşağıdaki tek iç boşluk (padding) özellikleri için bir kestirme özelliktir:

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

Çalışma şekli aşağıdaki gibidir:

 Eğer iç boşluk (padding) özelliğinin dört değeri varsa:

• padding: 25px 50px 75px 100px;
  • top padding is 25px (Üst)
  • right padding is 50px (Sağ)
  • bottom padding is 75px (Alt)
  • left padding is 100px (Sol)

Örnek:

div {
  padding: 25px 50px 75px 100px;
}

 Eğer iç boşluk (padding) özelliğinin üç değeri varsa:

• padding: 25px 50px 75px;
  • top padding is 25px (Üst)
  • right and left paddings are 50px (Sağ)
  • bottom padding is 75px (Alt)

Örnek:

div {
  padding: 25px 50px 75px;
}

 Eğer iç boşluk (padding) özelliğinin iki değeri varsa:

• padding: 25px 50px;
  • top and bottom paddings are 25px (Üst ve Alt)
  • right and left paddings are 50px (Sağ ve Sol)

Örnek:

div {
  padding: 25px 50px;
}

 Eğer iç boşluk (padding) özelliğinin bir değeri varsa:

• padding: 25px;
  • all four paddings are 25px (Tüm kenarlar için geçerlidir.)

Örnek:

div {
  padding: 25px;
}

İç Boşluk ve Eleman Genişliği (Padding and Element Width)

CSS genişlik özelliği, öğenin içerik alanının genişliğini belirtir. İçerik alanı, bir öğenin iç boşluğu (padding), kenarlığı ve kenar boşluğu içindeki kısımdır.

Bu nedenle, bir öğenin belirli bir genişliği varsa, o öğeye eklenen iç boşluk (padding), öğenin toplam genişliğine eklenecektir. Bu genellikle istenmeyen bir sonuçtur.

Örnek:

Burada

div {
  width: 300px;
  padding: 25px;
}

Genişliği 300 pikselde tutmak için, iç boşluk (padding) miktarı ne olursa olsun box-sizing özelliğini kullanabilirsiniz. Bu, öğenin gerçek genişliğini korumasına neden olur; iç boşluğu (padding) artırırsanız, kullanılabilir içerik alanı azalır.

Örnek:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}