Properti margin CSS

Definisi dan penggunaan

Properti margin singkat mengatur semua properti margin dalam satu deklarasi. Properti ini dapat memiliki 1 sampai 4 nilai.

Pengertian

Properti ini mengatur lebar semua margin dari elemen, atau mengatur lebar margin atas dan bawah masing-masing.

Margin yang berikutan di antara elemen blok akan disatukan, sedangkan elemen teks sebenarnya tidak mempunyai margin atas dan bawah. Margin kiri dan kanan elemen teks tidak disatukan. Secara sama, margin elemen yang floting juga tidak disatukan. Memungkinkan untuk menetapkan nilai margin negatif, tetapi perhatikan penggunaannya.

Keterangan:Perbolehan nilai negatif.

Contoh 1

margin:10px 5px 15px 20px;
  • Margin atas adalah 10px
  • Margin kanan adalah 5px
  • Margin bawah adalah 15px
  • Margin kiri adalah 20px

Contoh 2

margin:10px 5px 15px;
  • Margin atas adalah 10px
  • Margin kanan dan kiri adalah 5px
  • Margin bawah adalah 15px

Contoh 3

margin:10px 5px;
  • Margin atas dan bawah adalah 10px
  • Margin kanan dan kiri adalah 5px

Contoh 4

margin:10px;
  • Seluruh 4 margin adalah 10px

Lihat pula:

Panduan CSS:Margin eksternal CSS

Panduan HTML DOM:Atribut margin

Contoh

Atur 4 margin elemen p:

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

Coba sendiri

Sintaks CSS

margin: length|auto|initial|inherit;

Nilai atribut

Nilai Deskripsi
auto Margin dihitung oleh browser.
length Ditetapkan nilai margin dalam satuan konkrit seperti pixel, cm, dll. Nilai default adalah 0px.
% Dinyatakan dalam persen dari lebar elemen termasuk
inherit Ditetapkan bahwa margin harus dipindahkan dari elemen induk.

Detil teknis

Nilai default: 0
Inheritsi: no
Versi: CSS1
Sintaks JavaScript: object

Beberapa contoh lain

Seluruh properti margin dalam satu deklarasi
Contoh ini menunjukkan bagaimana mengatur semua properti margin dalam satu deklarasi.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5