Kutu modeli: CSS iç boşluğu

Elementin iç boşluğu çerçeve ve içerik bölgesi arasında yer alır. Bu alanı kontrol etmek için en basit özellik padding özelliğidir.

CSS padding özelliği, elementin etrafındaki çerçeve ile içerik arasındaki boşluk alanını tanımlar.

CSS padding Özelliği

CSS padding özelliği, elementin iç kenar boşluğunu tanımlar. Padding özelliği, uzunluk değerlerini veya yüzdelik değerleri kabul eder, ancak negatif değerleri kullanmamalıdır.

Örneğin, tüm h1 elementlerinin her kenarının 10 pixel iç kenar boşluğu olmasını istiyorsanız, yalnızca böyle yapmanız yeterlidir:

h1 {padding: 10px;}

Ayrıca, yukarı, sağ, aşağı ve sol sırasıyla her kenarın iç kenar boşluğunu ayrı ayrı ayarlayabilirsiniz, her kenar farklı bir birim veya yüzdelik değer kullanabilir:

h1 {padding: 10px 0.25em 2ex 20%;}

Tek kenar iç kenar boşluğu özellikleri

Ayrıca aşağıdaki dört ayrı özellik kullanılarak, yukarı, sağ, aşağı ve sol iç kenar boşluğu ayrı ayrı ayarlanabilir:

Bu örnekteki gibi, aşağıdaki kuralın elde ettiği sonuç, yukarıdaki kısaltma kuralı ile tamamen aynıdır:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

İç kenar boşluğu yüzdelik değerleri

Daha önce bahsedildiği gibi, element iç kenar boşluğuna yüzdelik değer ayarlanabilir. Yüzdelik değerler, dış kenar boşlukları gibi ebeveyn element genişliğine göre hesaplanır. Bu yüzden, ebeveyn element genişliği değiştiğinde, bu da değişir.

Aşağıdaki bu kural, paragrafin iç kenar boşluğunu ebeveyn element genişliğinin %10'una ayarlar:

p {padding: 10%;}

Örneğin: Bir paragrafin ebeveyn elementi div elementi ise, iç kenar boşluğu div genişliğine göre hesaplanmalıdır.

<div style="width: 200px;">
<p> Bu paragraf, genişliği 200 piksel olan bir DIV içinde yer alır.</p>
</div> 

Dikkat:Yukarı ve aşağı iç kenar boşlukları sol ve sağ iç kenar boşluklarıyla aynıdır; yani yukarı ve aşağı iç kenar boşluğunun yüzdelik değerleri, yükseklik yerine ebeveyn element genişliğine göre belirlenir.

CSS iç kenar boşluğu örneği:

Tüm iç kenar boşluğu özellikleri bir açıklamada
Bu örnek, tüm iç kenar boşluğu özelliklerini bir açıklamada ayarlamak için kısaltma özelliklerini nasıl kullanacağını gösterir, bu açıklamada bir ila dört değer olabilir.
Alt iç kenar boşluğu 1
Bu örnek, hücrenin alt iç kenar boşluğunu santimetre değeriyle nasıl ayarlandığını gösterir.
Alt iç kenar boşluğu 2
Bu örnek, hücrenin alt iç kenar boşluğunu yüzdelik değerle nasıl ayarlandığını gösterir.
Sol iç kenar boşluğu 1
Bu örnek, hücrenin sol iç kenar boşluğunu santimetre değeriyle nasıl ayarlandığını gösterir.
Sol iç kenar boşluğu 2
Bu örnek, hücrenin sol iç kenar boşluğunu yüzdelik değerle nasıl ayarlandığını gösterir.
Sağ iç kenar boşluğu 1
Bu örnek, hücrenin sağ iç kenar boşluğunu santimetre değerleri kullanarak nasıl ayarlandığını gösterir.
Sağ iç kenar boşluğu 2
Bu örnek, hücrenin sağ iç kenar boşluğunu yüzde değerleri kullanarak nasıl ayarlandığını gösterir.
Üst iç kenar boşluğu 1
Bu örnek, hücrenin üst iç kenar boşluğunu santimetre değerleri kullanarak nasıl ayarlandığını gösterir.
Üst iç kenar boşluğu 2
Bu örnek, hücrenin üst iç kenar boşluğunu yüzde değerleri kullanarak nasıl ayarlandığını gösterir.

CSS İç Kenar Boşluğu Özelliği

Özellik Açıklama
padding Kısa Özellik. Bir ifade içinde öğenin tüm iç kenar boşluğu özelliklerini ayarlamak için kullanılır.
padding-bottom Araçların alt iç kenar boşluğunu ayarlayın.
padding-left Araçların sol iç kenar boşluğunu ayarlayın.
padding-right Araçların sağ iç kenar boşluğunu ayarlayın.
padding-top Araçların üst iç kenar boşluğunu ayarlayın.