Sifat margin

Sifat margin menetapkan ruang luar elemen. Nilai sifat adalah sebarang unit untuk saiz atau sifat utama auto, yang membolehkan pelayar mengira ruang elemen secara automatik. Secara lalai, setiap pelayar boleh menambah ruang yang berbeza kepada elemen.

Sifat ini adalah singkatan untuk sifat margin-top, margin-right, margin-bottom, margin-left.

Sintaks

selector {
	margin: nilai;
}

Bilangan nilai

Sifat margin menerima 1, 2, 3 atau 4 nilai, disenaraikan dengan ruang:

Bilangan	Keterangan
`1`	Satu nilai menetapkan ruang dari semua sisi elemen.
`2`	Nilai pertama menetapkan ruang atas dan bawah, dan kedua - kanan dan kiri.
`3`	Nilai pertama menetapkan ruang atas, kedua - kanan dan kiri, dan ketiga - bawah.
`4`	Nilai pertama menetapkan ruang atas, kedua - kanan, ketiga - bawah, dan keempat - kiri.

Contoh

Sekarang kita akan ada blok tanpa ruang:

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

Contoh

Dan sekarang kita tetapkan ruang 10px untuk blok:

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

Contoh

Kita tetapkan ruang 10px atas dan bawah dan 20px - kiri dan kanan untuk blok:

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

Contoh

Kita tetapkan ruang 5px atas, 15px kanan, 25px bawah dan 35px kiri untuk blok:

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

Lihat juga

sifat padding,
yang menetapkan ruang dalam