Atribut margin gaya

Definisi dan penggunaan

margin Atribut menetapkan atau mengembalikan margin elemen.

Atribut ini dapat menggunakan satu hingga empat nilai:

  • Satu nilai, contoh: div {margin: 50px} - Semua empat margen adalah 50px
  • Dua nilai, contoh: div {margin: 50px 10px} - Margen atas-bawah adalah 50px, dan margen kiri-kanan adalah 10px
  • Tiga nilai, contoh: div {margin: 50px 10px 20px} - Margen atas adalah 50px, margen kiri-kanan adalah 10px, dan margen bawah adalah 20px
  • Empat nilai, misalnya: div {margin: 50px 10px 20px 30px} - marjin atas adalah 50px, marjin kanan adalah 10px, marjin bawah adalah 20px, dan marjin kiri adalah 30px

Atribut marjin dan padding mengisi ruang sekitar elemen. Tetapi, perbedaan di tempat, marjin mengisi ruang disekitar garis bingkai, sementara padding mengisi ruang di dalam garis bingkai elemen.

Lihat pula:

Pelajaran CSS:Margin Luar CSS

Panduan CSS:Atribut marjin

Contoh

Contoh 1

Mengatur empat marjin elemen <div>:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Coba sendiri

Contoh 2

Mengubah empat marjin elemen <div> menjadi "25px":

document.getElementById("myDiv").style.margin = "25px";

Coba sendiri

Contoh 3

Mengembalikan marjin elemen <div>:

alert(document.getElementById("myDiv").style.margin);

Coba sendiri

Contoh 4

Perbedaan antara atribut marjin dan padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Coba sendiri

Sintaks

Mengembalikan atribut marjin:

object.style.margin

Mengatur atribut marjin:

object.style.margin = "%|length|auto|initial|inherit"

Nilai atribut

Nilai Deskripsi
% Didefinisikan marjin dengan persen lebar elemen induk.
length Didefinisikan marjin dengan unit panjang.
auto Browser mengatur marjin (empat marjin akan sama).
initial Menetapkan atribut ini ke nilai defaultnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: 0
Nilai kembalian: String, menunjukkan marjin luar elemen.
Versi CSS: CSS1

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan