diskenar_bosluqu.htm
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.

HTMLde 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:

auto Dışkenar boşluğunu gözatıcı (browser ) otomatik olarak belirler.
margin: auto
birim Dışkenar boşluğunun CSS birimleriyle ifade edilmesidir.
margin: 12px, margin:1cm, vb.
yüzde oranı Dışkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
margin: 20%


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.

 
Kod Alanı:

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

<p>Dışkenar boşlukları:</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm">Tek değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px">İki değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10%">Üç değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10% auto">Dört değer.</p>

</body>
</html>



 



Öğ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.

CSSde ü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:

margin-top Üst dışkenar boşluğunu ifade eder.
margin-top: 15%
margin-left Sol dışkenar boşluğunu ifade eder.
margin-left: 25mm
margin-bottom Alt dışkenar boşluğunu ifade eder.
margin-top: auto
margin-right Sağ dışkenar boşluğunu ifade eder.
margin-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