Properti margin CSS
Contoh
Atur margin untuk keempat sisi elemen <p> menjadi 35 piksel:
p {
margin: 35px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti margin
menetapkan margin untuk elemen, dan merupakan properti singkatan untuk properti berikut:
Jika properti margin memiliki empat nilai:
- margin: 10px 5px 15px 20px;
- margin atas adalah 10px
- margin kanan adalah 5px
- margin bawah adalah 15px
- margin kiri adalah 20px
Jika properti margin memiliki tiga nilai:
- margin: 10px 5px 15px;
- margin atas adalah 10px
- margin kanan dan kiri adalah 5px
- margin bawah adalah 15px
Jika properti margin memiliki dua nilai:
- margin: 10px 5px;
- margin atas dan bawah adalah 10px
- margin kanan dan kiri adalah 5px
Jika properti margin memiliki satu nilai:
- margin: 10 piksel;
- keempat margin adalah 10px
Catatan: Nilai negatif diperbolehkan.
Nilai bawaan: | 0 |
---|---|
Diwarisi: | tidak |
Animasi: | ya, lihat properti individu . Baca tentang animasi |
Versi: kapan: | CSS1 |
Sintaks JavaScript: | objek .style.margin="100px 50px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Sintaks CSS
margin: length|auto|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a 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 untuk elemen <p> menjadi 35 piksel untuk atas dan bawah, dan menjadi 70 piksel untuk kanan dan kiri:
p {
margin: 35px 70px;
}
Contoh
Atur margin untuk elemen <p> menjadi 35 piksel untuk atas, 70 piksel untuk kanan dan kiri, dan menjadi 50 piksel untuk bawah:
p {
margin: 35px 70px 50px;
}
Contoh
Atur margin untuk elemen <p> menjadi 35 piksel untuk atas, 70 piksel untuk kanan, 50 piksel untuk bawah, dan 90 piksel untuk kiri:
p {
margin: 35px 70px 50px 90px;
}
Halaman Terkait
Tutorial CSS: Margin CSS
Tutorial CSS: Model Kotak CSS
Referensi DOM HTML: properti margin