Ciutkan Margin CSS
Terkadang dua margin runtuh menjadi satu margin.
Keruntuhan Margin
Margin atas dan bawah elemen terkadang diciutkan menjadi margin tunggal yang sama dengan margin terbesar dari dua margin.
Ini tidak terjadi pada margin kiri dan kanan! Hanya margin atas dan bawah!
Lihatlah contoh berikut:
Contoh
Demonstrasi runtuhnya margin:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Dalam contoh di atas, elemen <h1> memiliki margin bawah 50px dan elemen <h2> memiliki margin atas yang diatur ke 20px.
Akal sehat tampaknya menyarankan bahwa margin vertikal antara <h1> dan <h2> akan menjadi total 70px (50px + 20px). Namun karena margin runtuh, margin sebenarnya menjadi 50px.
Semua Properti Margin CSS
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |