5 Propety CSS untuk Membuat Ruang Kosong(Margin) pada Elemen

Margin Properties berguna untuk membuat ruang kosong atau spasi pada sebuah elemen bagian luar. Artinya, Anda bisa menggunakan properti tersebut untuk membuat spasi diantara elemen agar lebih rapi dan tidak saling bertabrakan seperti pada gambar berikut.

5 Propety CSS untuk Membuat Ruang Kosong(Margin) pada Elemen
Gambar

Margin Properties terbagi menjadi 4 yang secara terpisah yaitu, margin-top, right, bottom, dan left. Tapi Anda juga bisa mempersingkat penulisan menggunakan properti 'margin' saja. Langsung saja, berikut ulasan selengkapnya.

Daftar isi

1. Margin

properti margin merupakan property CSS yang difungsikan untuk membuat ruang kosong diluar sebuah elemen. Secara keseluruhan, nilai dari properti tersebut telah mewakili dari keempat properti margins lainnya yaitu margin-top, margin-right, margin-bottom, margin-left.

Untuk penulisan Value atau nilai untuk properti margin bisa berbeda-beda, misalnya Anda bisa menulis satu nilai saja atau Anda juga bisa menulis 4 deret nilai sekaligus yang secara urut dari kiri ke kanan yaitu : top, right, bottom, left. berikut contoh penulisan kode untuk properti margin beserta nilainya :

contoh kode/program/sintaks css
selector{
    margin: 20px; // satu nilai
    margin: 10px 20px 10px 20px; // empat nilai
}

Jika Anda menulis dengan hanya satu nilai saja, maka secara keseluruhan satu nilai tersebut berlaku untuk mengatur ruang kosong dari keempat sisi yaitu atas, kanan, bawah, dan kiri. pada contoh diatas, nilai yang berisi 20px adalah satu nilai. artinya untuk margin atas, kanan, bawah, dan kiri diatur dengan ukuran 20px.

Sedangkan jika Anda menulis properti tersebut dengan berisi empat nilai seperti pada contoh diatas yaitu 10px 20px 10px 20px. artinya untuk margin atas diatur dengan ukuran 10px, margin kanan 20px, bawah 10px, dan margin kiri diatur dengan ukuran 20px.

Berikut dibawah ini adalah tabel yang berisi Nilai/Value yang bisa Anda gunakan untuk melengkapi isi dari property margin :

Daftar Tabel untuk Margin
NoValueDeskripsi
1px, em, cm, dllmengatur margin dengan ukuran yang dipilih. misal, 10px, 1em, 0.5cm, dll.
2%mengatur margin dengan ukuran dalam bentuk persen. misal 25%, 50%, 35%, dll.
3initialmengembalikan nilai dari properti margin ke default value.
4autosecara otomatis niali dari properti margin akan diatur oleh browser.

dari beberapa Nilai dalam tabel diatas, Nilai-nilai tersebut juga bisa digunakan untuk keempat properti lainnya yaitu margin-top, margin-right, margin-bottom, margin-left.

2. Margin-Top

margin-top merupakan properti CSS yang bisa Anda gunakan untuk membuat ruang kosong atau spasi pada sebuah elemen bagian atas. Ingat, hanya bisa membuat ruang kosong pada bagian atas dari sebuah elemen.

contoh kode/program/sintaks css
selector{
    margin-top: 5px;
}

3. Margin-Right

margin-top merupakan properti CSS yang bisa Anda gunakan untuk memmbuat ruang kosong atau spasi pada sebuah elemen bagian kanan. Ingat, hanya bisa membuat ruang kosong pada bagian kanan dari sebuah elemen.

contoh kode/program/sintaks css
selector{
    margin-right: 30px;
}

4. Margin-Bottom

Sama seperti namanya 'bottom', properti CSS ini bisa Anda gunakan untuk membuat ruang kosong atau spasi hanya bagian bawah saja dari sebuah elemen.

contoh kode/program/sintaks css
selector{
    margin-bottom: 35px;
}

5. Margin-Left

fungsi properti ini hampir sama dengan ke-3 properti margins sebelumnya. perbedaannya, margin-left merupakan properti css yang bisa Anda gunakan untuk membuat ruang kosong atau spasi pada sebuah elemen hanya bagian kiri saja.

contoh kode/program/sintaks css
selector{
    margin-left: 40px;
}