Dışkenar Boşluğu

CSS DERSLERİ

Ders6: Dışkenar Boşluğu

Bir önceki sayfada nesnelerin sınır çizgilerini CSS ile şekillendirmeyi öğrenmiştik. Şimdi bu sınır çizgilerin dışkenar boşluklarını şekillendirmeyi göreceğiz.

HTML'de nesnelerin diğer nesnelere olan konumunu, dışkenar boşlukları ile belirleyebiliriz. Her nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında bir boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu dersimizde bu boşluğu margin özelliği ile ifade edeceğiz.

Dışkenar Boşluk Değeri

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

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

Öğretici uygulamamızda dışkenar boşluklarının daha iyi gözlenebilmesi amacıyla, sınır çizgileri 2px (piksel) kalınlıkta tasarlandı. (Sınır çizgilerini belirtmek gibi bir zorunluluk yoktur.) Uygulamamızda görüldüğü üzere, ilk nesnemizin dışkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt dışkenar boşluklar 1 cm, sol ve sağ dışkenar boşluklar 20 piksel. Üçüncü nesnemizin üst dışkenar boşluğu yine 1 cm, sol ve sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu ise sayfanın onda biri (10%) kadar. Son nesnemizin üst dışkenar boşluğu 1 cm, sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol dış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ğ dış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: