Codingku

margin

Properti CSS margin adalah properti singkatan untuk mengatur empat properti margin: margin-top, margin-right, margin-bottom, dan margin-left dalam satu deklarasi.

Setiap elemen pada halaman web adalah persegi panjang.

Dan setiap elemen memiliki model kotak persegi panjang yang menggambarkan area yang di hasilkan untuk elemen, yaitu: content box, padding box, border-box, dan margin box.

Content box ada pada setiap elemen. Sedangkan padding, border, dan margin box merupakan opsional yang keberadaannya tergantung pada layout desain halaman web yang dibuat oleh web developer.

Model kotak elemen dalam CSS — termasuk area konten, padding, border, dan margin

Model kotak elemen dalam CSS — termasuk area konten, padding, border, dan margin.

Properti margin tidak berpengaruh pada elemen inline yang tidak diganti. Periksa artikel tentang display untuk detail tentang elemen inline dan lainnya.

CSS Syntax

margin: length | auto | initial | inherit;

JavaScript Syntax

object.style.margin="100px 50px"
Default value:disk
Inherited:ya
Animatable:tidak Read about animatable
Version:CSS1

Attribute Value

default margin: 0;

Menghapus semua margin.

margin: 30px;

Saat menggunakan 1 nilai, margin ditetapkan untuk semua 4 sisi.

margin: 30px 60px;

Saat menggunakan 2 nilai:

  • nilai pertama untuk top/bottom (atas/bawah)
  • nilai kedua untuk right/left (kanan/kiri)

Untuk mengingat urutan, pikirkan tentang nilai-nilai yang belum kamu tetapkan.

Jika kamu memasukkan 2 nilai (top/right), kamu mengabaikan pengaturan bagian bottom dan left (bawah dan kiri).

Karena bottom adalah rekanan vertikal top (atas), maka akan menggunakan nilai top. Dan karena left adalah padanan horizontal right (kanan), itu akan menggunakan nilai right.

margin: 30px 60px 45px;

Saat menggunakan 3 nilai:

  • nilai pertama untuk top (atas)
  • nilai kedua untuk right/left (kanan/kiri)
  • nilai ketiga untuk bottom (bawah)

Untuk mengingat urutan, pikirkan tentang nilai-nilai yang belum kamu tetapkan.

Jika kamu memasukkan 3 nilai (atas / kanan / bawah), kamu mengabaikan pengaturan kiri. Sebagai rekanan yang tepat, itu akan menggunakan nilainya.

margin: 30px 60px 45px 85px;

Saat menggunakan 4 nilai:

  • nilai pertama untuk atas
  • nilai kedua untuk kanan
  • nilai ketiga untuk bawah
  • nilai keempat untuk kiri

Untuk mengingat urutannya, mulailah dari atas dan lanjutkan searah jarum jam.