ickenar_bosluqu.htm
Bu sayfa bir önceki sayfanın tekrarı gibi olacak. Her nesnenin dışkenar boşluğu olduğu gibi, sınır çizgisiyle nesne arasında bulunan içkenar boşluğu da vardır. Bu sayfadaki konumuz bu içkenar boşluklarını CSS ile şekillendirmek.

İçkenar Boşluk Değeri
Özellikle tablolarda içkenar boşluklarının ayarlanması, tablo düzeni için önemli bir işlemdir. CSSde dışkenar boşluklarını ifade etmek için padding özelliğinden yararlanırız.

padding özelliğine vereceğimiz değerler şu şekillerde olabilir:

birim İçkenar boşluğunun CSS birimleriyle ifade edilmesidir.
padding: 12px, margin:1cm, vb.
yüzde oranı İçkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
padding: 20%


Eğer padding özelliğine tek değer verirsek, tüm içkenar boşlukları bu değeri alır. Eğer iki değer verirsek, üst ve alt içkenar boşlukları ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst içkenar boşluğu ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri, alt içkenar boşluğu üçüncü değeri alır. Eğer dört değer verirsek, üst içkenar boşluğu ilk değeri, sağ içkenar boşluğu ikinci değeri, alt içkenar boşluğu üçüncü değeri, sol içkenar boşluğu dördüncü değeri alır.

 
Kod Alanı:

 
<html>
<head>
<title>İçkenar boşlukları,</title>
</head>
<body>

<p>İçkenar boşlukları:</p>
<p style="background-color: red; padding: 1cm">Tek değer.</p>
<p style="background-color: red; padding: 1cm 20px">İki değer.</p>
<p style="background-color: red; padding: 1cm 20px 10%">Üç değer.</p>
<p style="background-color: red; padding: 1cm 20px 10% auto">Dört değer.</p>

</body>
</html>



 



Öğretici uygulamamızda içkenar boşluklarının daha iyi gözlenebilmesi amacıyla, nesnemize (paragrafa ) arkaplan rengi verildi. Uygulamamızda görüldüğü üzere, ilk nesnemizin içkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt içkenar boşlukları 1 cm, sol ve sağ içkenar boşlukları 20 piksel. Üçüncü nesnemizin üst içkenar boşluğu yine 1 cm, sol ve sağ içkenar boşlukları 20 piksel, alt içkenar boşluğu ise sayfanın onda biri (10% ) kadar. Son nesnemizin üst içkenar boşluğu 1 cm, sağ içkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol içkenar boşluğu ise gözatıcının (browserın ) atadığı otomatik değer kadardır.

CSSde üst, alt, sol ve sağ içkenar boşluklarını ayrı ayrı ifade etmek de mümkündür. Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları görülmektedır:

padding-top Üst içkenar boşluğunu ifade eder.
padding-top: 15%
padding-left Sol içkenar boşluğunu ifade eder.
padding-left: 25mm
padding-bottom Alt içkenar boşluğunu ifade eder.
padding-top: auto
padding-right Sağ içkenar boşluğunu ifade eder.
padding-top: 30px
Yardım İçin Sadece Bir Tık Yeter
 
Sponsor
 
.tk
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol