CSS İç Marj

Bu elementin iç kenar boşluğu 70px'dir.

CSS İç Marj

CSS padding Özellik, tanımlanmış bir sınırların içindeki element içeriği etrafında boşluk oluşturmak için kullanılır.

CSS ile, iç kenar boşluklarını (dolgu) tamamen kontrol edebilirsiniz. Her bir yan (üst, sağ, alt ve sol) için iç kenar boşluğu ayarlayabilecek bazı özellikler vardır.

Padding - Tek bir kenar

CSS, her bir yan için elementin iç kenar boşluklarını belirlemek için özelliklere sahiptir:

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

Tüm iç kenar boşluğu özellikleri aşağıdaki değerleri ayarlayabilir:

  • length - px, pt, cm gibi birimlerle belirtilen iç kenar boşluğu
  • % - İç element genişliğinin yüzdesi ile belirtilen iç kenar boşluğu
  • inherit - Anne elementinden iç kenar boşluklarını devral

İpucu:Negatif değerler izin verilmez.

Örnek

<div> elementinin dört yanına farklı iç kenar boşlukları ayarlamak için:

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

Kişisel olarak deneyin

Padding - Kısaltılmış özellik

Kodun azaltılması için, tüm iç kenar boşlukları özelliklerini bir özellikte belirtebilirsiniz.

padding Özellik, aşağıdaki iç kenar boşluğu özelliklerinin kısa yazım özelliğidir:

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

Çalışma prensibi budur:

Eğer padding Dört değeri olan özellik:

  • padding: 25px 50px 75px 100px;
    • Üst iç kenar boşluğu 25px'dir
    • Sağ iç kenar boşluğu 50px'dir
    • Alt iç kenar boşluğu 75px'dir
    • Sol iç kenar boşluğu 100px'dir

Örnek

Dört değeri ayarlayan padding kısa yazım özelliğini kullanarak:

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

Kişisel olarak deneyin

Eğer padding Üç değeri ayarlayan özellik:

  • padding: 25px 50px 75px;
    • Üst iç kenar boşluğu 25px'dir
    • Sağ ve sol iç kenar boşluğu 50px'dir
    • Alt iç kenar boşluğu 75px'dir

Örnek

Üç değeri ayarlayan padding kısa yazım özelliğini kullanarak:

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

Kişisel olarak deneyin

Eğer padding İki değeri ayarlayan özellik:

  • padding: 25px 50px;
    • Üst ve alt iç kenar boşluğu 25px'dir
    • Sağ ve sol iç kenar boşluğu 50px'dir

Örnek

İki değeri ayarlayan padding kısa yazım özelliğini kullanarak:

div {
  padding: 25px 50px;
}

Kişisel olarak deneyin

Eğer padding Özellik bir değeri ayarlar:

  • padding: 25px;
    • Tüm dört iç kenar boşluğu 25px'dir

Örnek

Bir değeri ayarlayan padding kısa yazım özelliğini kullanarak:

div {
  padding: 25px;
}

Kişisel olarak deneyin

İç kenar boşluğu ve element genişliği

CSS width Özellik, element içeriği alanının genişliğini belirtir. İçeriği alan, elementin ( kutu modeli ) iç kenar boşluğu, kenar çizgisi ve dış kenar boşluğu içindeki bölgedir.

Bu nedenle, elemente belirli bir genişlik atanmışsa, elemente eklenen iç kenar boşlukları elementin toplam genişliğine eklenir. Bu genellikle istenmeyen bir sonuçtur.

Örnek

Burada, <div> elementinin genişliği 300px'dir. Ancak, <div> elementinin gerçek genişliği 350px olacaktır (300px + sol iç kenar boşluğu 25px + sağ iç kenar boşluğu 25px):

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

Kişisel olarak deneyin

Genişliği 300px olarak tutmak istiyorsanız, doldurma miktarı ne olursa olsun: box-sizing Bu, elementin genişliğini korumaya yardımcı olur. İç kenar boşluklarını artırdığınızda, kullanılabilir içerik alanı azalır.

Örnek

Box-sizing özelliğini kullanarak genişliği 300px olarak tutun, doldurma miktarı ne olursa olsun:

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

Kişisel olarak deneyin

Daha fazla örnek

Sol iç kenar boşluğunu ayarlar
Bu örnek, <p> elementinin sol iç kenar boşluğunu nasıl ayarlandığını gösterir.
Sağ iç kenar boşluğunu ayarlar
Bu örnek, <p> elementinin sağ iç kenar boşluğunu nasıl ayarlandığını gösterir.
Üst iç kenar boşluğunu ayarlar
Bu örnek, <p> elementinin üst iç kenar boşluğunu nasıl ayarlandığını gösterir.
Alt iç kenar boşluğunu ayarlar
Bu örnek, <p> elementinin alt iç kenar boşluğunu nasıl ayarlandığını gösterir.

Tüm CSS iç kenar boşluğu özellikleri

Özellik Açıklama
padding Bir açıklamada tüm iç kenar boşluğu özelliklerini ayarlamak için kısa yazım özelliği.
padding-bottom Elementin alt iç kenar boşluğunu ayarlar.
padding-left 元素的 sol iç kenar boşluğunu ayarlar.
padding-right Aranın sağ iç kenar boşluğunu ayarlayın.
padding-top Aranın üst iç kenar boşluğunu ayarlayın.

Genişletilmiş Okuma

Ders Kitabı:Kutu Modeli: CSS İç Kenar Boşluğu