CSS ile Dış Kenar Boşluğu

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




EğitimCSScss dışkenarcss dışkenar boşlugucss nedir
CSS Dersleri

Ara

Eğitim


Konular

Tags

Hanci.org sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.
Hanci.org sitesini kullanarak çerez politikamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.