Properti CSS margin-bottom
Contoh
Atur margin bawah untuk elemen <p> menjadi 25 piksel:
p.ex1 {
margin-bottom: 25px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti margin-bottom
menetapkan margin bawah elemen.
Catatan: Nilai negatif diperbolehkan.
Nilai bawaan: | 0 |
---|---|
Diwarisi: | tidak |
Animasi: | ya, lihat properti individu . Baca tentang animasi |
Versi: kapan: | CSS1 |
Sintaks JavaScript: | objek .style.marginBottom="100px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
margin-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Sintaks CSS
margin-bottom: length|auto|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
length | Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a bottom margin in percent of the width of the containing element | |
auto | The browser calculates a bottom margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
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 horizontal (kiri dan kanan)! Hanya margin vertikal (atas dan bawah)!
Lihatlah contoh berikut:
Contoh
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
Pada contoh di atas, elemen <p class="a"> memiliki margin atas dan bawah sebesar 30px. Elemen <p class="b"> memiliki margin atas dan bawah 20px.
Ini berarti bahwa margin vertikal antara <p class="a"> dan <p class="b"> harus 50px (30px + 20px). Tetapi karena margin runtuh, margin sebenarnya menjadi 30px!
Lebih Banyak Contoh
Contoh
Atur margin bawah untuk elemen <p> menjadi 10% dari lebar wadah:
p.ex1 {
margin-bottom: 10%;
}
Contoh
Atur margin bawah untuk elemen <p> menjadi 2 em:
p.ex1 {
margin-bottom: 2em;
}
Halaman Terkait
Tutorial CSS: Margin CSS
Referensi DOM HTML: properti marginBottom