Properti margin

Properti margin mengatur jarak luar elemen. Nilai propertinya adalah satuan untuk ukuran apa pun atau properti kunci auto, yang memungkinkan browser menghitung jarak elemen secara mandiri. Secara default, setiap browser dapat menambahkan jarak yang berbeda ke elemen.

Properti ini merupakan singkatan untuk properti margin-top, margin-right, margin-bottom, margin-left.

Sintaksis

selektor {
	margin: nilai;
}

Jumlah Nilai

Properti margin menerima 1, 2, 3 atau 4 nilai, yang dicantumkan dipisahkan oleh spasi:

Jumlah	Deskripsi
`1`	Satu nilai mengatur jarak dari semua sisi elemen.
`2`	Nilai pertama mengatur jarak atas dan bawah, dan nilai kedua - kanan dan kiri.
`3`	Nilai pertama mengatur jarak atas, kedua - kanan dan kiri, dan ketiga - bawah.
`4`	Nilai pertama mengatur jarak atas, kedua - kanan, ketiga - bawah, dan keempat - kiri.

Contoh

Sekarang kita akan memiliki blok tanpa jarak:

<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 akan mengatur jarak blok sebesar 10px:

<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

Mari atur jarak blok sebesar 10px untuk atas dan bawah, dan 20px - untuk kiri dan kanan:

<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

Mari atur jarak blok sebesar 5px untuk atas, 15px untuk kanan, 25px untuk bawah, dan 35px untuk kiri:

<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

properti padding,
yang mengatur jarak dalam