Yazılım Öğren

CSS İçkenar Boşluğu

css-11

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. CSS’de 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.

<html>

<head>

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

</head>

<body>

İçkenar boşlukları:

Tek değer.

İki değer.

Üç değer.

Dört değer.

</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.

CSS’de ü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