Properti margin gaya
Contoh
Setel keempat margin elemen <div>:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Definisi dan Penggunaan
Properti margin menetapkan atau mengembalikan margin elemen.
Properti ini dapat mengambil dari satu hingga empat nilai:
- Satu nilai, seperti: div {margin: 50px} - keempat margin akan menjadi 50px
- Dua nilai, seperti: div {margin: 50px 10px} - margin atas dan bawah akan menjadi 50px, margin kiri dan kanan akan menjadi 10px
- Tiga nilai, seperti: div {margin: 50px 10px 20px}- margin atas akan menjadi 50px, margin kiri dan kanan akan menjadi 10px, margin bawah akan menjadi 20px
- Empat nilai, seperti: div {margin: 50px 10px 20px 30px} - margin atas akan menjadi 50px, margin kanan akan menjadi 10px, margin bawah akan menjadi 20px, margin kiri akan menjadi 30px
Baik properti margin dan properti padding menyisipkan ruang di sekitar elemen. Namun, perbedaannya adalah margin menyisipkan ruang di sekitar perbatasan, sedangkan padding menyisipkan ruang di dalam batas elemen.
Dukungan Peramban
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Kembalikan properti margin:
object.style.margin
Setel properti margin:
object.style.margin = "%|length|auto|initial|inherit"
Nilai properti
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Detail Teknis
| Nilai Bawaan: | 0 |
|---|---|
| Nilai Kembali: | Sebuah String, mewakili margin elemen |
| Versi CSS | CSS1 |
Lebih Banyak Contoh
Contoh
Ubah keempat margin elemen <div> menjadi "25px":
document.getElementById("myDiv").style.margin = "25px";
Contoh
Kembalikan margin elemen <div>:
alert(document.getElementById("myDiv").style.margin);
Contoh
Perbedaan antara properti margin dan properti padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Halaman Terkait
Tutorial CSS: Margin CSS
Referensi CSS: properti margin
Objek Gaya