margin Özelliği

margin özelliği bir öğenin dış boşluğunu belirler. Özelliğin değeri olarak boyut birimlerinden herhangi biri veya tarayıcıya öğenin boşluğunu kendi kendine hesaplama olanağı veren auto anahtar sözcüğü kullanılabilir. Varsayılan olarak, her tarayıcı öğelere çeşitli boşluklar ekleyebilir.

Bu özellik, margin-top, margin-right, margin-bottom, margin-left özellikleri için bir kısaltmadır.

Sözdizimi

seçici {
	margin: değer;
}

Değer Sayısı

margin özelliği, boşlukla ayrılmış olarak listelenen 1, 2, 3 veya 4 değerini alır:

Sayı	Açıklama
`1`	Bir değer, öğenin tüm taraflarından boşluk belirler.
`2`	İlk değer üstten ve alttan boşluk belirler, ikincisi ise sağdan ve soldan boşluk belirler.
`3`	İlk değer üstten boşluk belirler, ikincisi sağdan ve soldan boşluk belirler, üçüncüsü ise alttan boşluk belirler.
`4`	İlk değer üstten boşluk belirler, ikincisi sağdan, üçüncüsü alttan, dördüncüsü ise soldan boşluk belirler.

Örnek

Şimdi boşluksuz bir bloğumuz olacak:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Örnek

Şimdi bloğa 10px boşluk verelim:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Örnek

Bloğa üstten ve alttan 10px, sağdan ve soldan 20px boşluk verelim:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Örnek

Bloğa üstten 5px, sağdan 15px, alttan 25px ve soldan 35px boşluk verelim:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Ayrıca Bakınız

iç boşluk belirleyen padding özelliği