Kutu modeli: CSS iç boşluğu
- Önceki Sayfa CSS Kutu Modeli Özeti
- Sonraki Sayfa CSS Kenarlık
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. |
- Önceki Sayfa CSS Kutu Modeli Özeti
- Sonraki Sayfa CSS Kenarlık