Properti margin adalah properti shorthand untuk mengatur empat properti margin: margin-top, margin-right, margin-bottom, dan margin-left, dalam satu deklarasi.

Setiap elemen di halaman web berbentuk segi empat. Setiap elemen memiliki model kotak persegi panjang, yang menggambarkan masing-masing kotak persegi panjang (area) yang dihasilkan untuk elemen: kotak konten, kotak padding, kotak pembatas, dan kotak margin. Kotak konten ada untuk setiap elemen. Kotak padding, border, dan margin adalah opsional, dan keberadaannya tergantung pada apakah kalian menerapkan padding, border, atau margin ke elemen.

Properti margin tidak berpengaruh pada elemen inline yang tidak diganti, seperti tag <span> . Periksa entri properti display untuk detail tentang elemen inline dan lainnya.

Kadang-kadang, margin yang bersebelahan dari dua kotak atau lebih (yang mungkin bersebelahan atau bersarang) bergabung untuk membentuk satu margin. Ini disebut sebagai “collapsing margin” dalam CSS.

Artinya, dua margin, biasanya margin vertikal (margin atas dan margin bawah) bergabung menjadi satu margin yang sama dengan margin yang lebih besar. Dalam ekspresi matematika, ini akan dinyatakan sebagai: margin = max (margin1, margin2), di mana margin1 mengacu pada margin vertikal elemen pertama, dan margin2 mengacu pada margin vertikal elemen kedua. Tentu saja, ini berlaku untuk sebanyak mungkin elemen, tidak hanya dua.

Penggunaan Property Margin:

Syntax:

 

Nilai Awal: 0 0 0 0; yang merupakan gabungan dari nilai awal dari masing-masing properti longhand.

Berlaku untuk: semua elemen kecuali elemen dengan jenis tampilan tabel selain keterangan tabel, tabel dan inline-table