Margin häsiýeti

margin häsiýeti elementüň daşarky boşlugyny belgileýär. Häsiýetiň bahasy hökmünde islendik ölçeg birlikleri ýa-da brauzeriň özbaşyna elementüň boşlugyny hasaplamagyna mümkinçilik berýän auto açar sözi ulanylyp bilner. Başdaşyna, her brauzer elementlere dürli boşluklar goşup biler.

Bu häsiýet şu häsiýetler üçin gysgaltma bolup hyzmat edýär: margin-top, margin-right, margin-bottom, margin-left.

Sintaksis

selektor {
	margin: baha;
}

Baha sany

margin häsiýeti 1, 2, 3 ýa-da 4 bahany boşluk bilen sanawlaýar:

Sany	Düşündiriş
`1`	Bir baha elementüň ähli tarapyndan boşluk belgileýär.
`2`	Birinci baha ýokardan we aşakdan boşlugy belgileýär, ikinji bolsa sagdan we çepden.
`3`	Birinci baha ýokardan boşlugy belgileýär, ikinji baha sagdan we çepden, üçünji baha aşakdan.
`4`	Birinci baha ýokardan boşlugy belgileýär, ikinji baha sagdan, üçünji baha aşakdan, dördünji baha çepden.

Mysal

Indi bizde boşlugsyz blok bolsun:

<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;
}

Mysal

Indi bolsa bloka 10px boşluk belleýäris:

<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;
}

Mysal

Bloka ýokardan we aşakdan 10px, çepden we sagdan 20px boşluk belleýäris:

<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;
}

Mysal

Bloka ýokardan 5px, sagdan 15px, aşakdan 25px we çepden 35px boşluk belleýäris:

<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;
}

Şeýle-de görüň

padding häsiýeti,
ýapyk boşlugy belleýär