CSS Margin dan Cara Menggunakan CSS Margin
Kalian pernah membuat dokumen menggunakan Microsoft Word, kemudian menentukan margin? saya yakin kalian sudah pernah melakukannya. Apa itu margin? jika di microsoft word margin adalah jarak antara tepi pengetikan dengan tepi halaman kertas. Ya intinya margin adalah ruang di diluar batas konten.
Dalam bidang desain web (web design) penggunaan margin ini sering kita gunakan untuk mengatur jarak antara elemen HTML satu dengan elemen HTML lainnya. Nah, kali ini kita akan mempelajari bagaimana menggunakan CSS untuk mengatur margin dalam desain web.
Properti CSS margin digunakan untuk membuat ruang di sekitar elemen HTML, di luar batas yang ditentukan. Dengan CSS, kalian memiliki kendali penuh untuk menentukan margin. Ada properti hyang digunakan untuk mengatur margin pada setiap sisi elemen (atas, kanan, bawah, dan kiri).
Berikut ini properti CSS untuk menentukan margin pada setiap sisi elemen:
- margin-top
- margin-right
- margin-bottom
- margin-left
Masing-masing properti di atas dapat diberi nilai:
- auto – browser akan menghitung margin secara otomatis.
- length – menentukan margin dalam px, pt, cm, dll.
- % – menentukan margin dalam satuan % dari lebar elemen diluarnya.
- inherit – menentukan bahwa margin harus diwarisi dari elemen induk.
Oh iya, CSS Margin juga mengizinkan nilai Negatif.
Cara Menggunakan CSS Margin
Untuk cara penggunaanya silahkan perhatikan dan praktekkan contoh kode HTML dan CSS di bawah ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS Margin Bersama SolusiLain.Com</title> <style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 60px; background-color: lightgreen; } </style> </head> <body> <h2>Contoh paragraf yang menggunakan CSS Margin</h2> <hr> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </body> </html> |
Adapun hasil penerapan CSS Margin pada contoh di atas, jika dijalankan pada web browser akan terlihat seperti pada gambar di bawah ini:
Hasil Penerapan CSS Margin
Menggunakan Margin – Shorthand Property (Properti Singkat)
Cara penulisan CSS Margin dapat dipersingkat dengan menggunakan format berikut:
1 |
margin : margin_atas margin_kanan margin_bawah margin_kiri; |
Contoh dari contoh sebelumnya :
1 2 3 4 |
margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 60px; |
Dapat dipersingkat penulisannya menjadi:
1 |
margin: 100px 100px 150px 60px; |
Dengan cara tersebut akan menghasilkan tampilan yang sama. Silahkan kalian akan menggunakan cara yang mana yang menurut kalian paling efektif.
Baik mungkin sampai disini dulu tutorial CSS Margin dan Cara Penggunaannya ini, jika ada pertanyaan langsung isi kolom komentar di bawah postingan ini ya.
