Dalam tutorial kali ini kita membahas tentang box model dalam css, salah satunya yaitu margin. yaitu lapisan terakhir dalam sebuah konsep Box model CSS
Pengertian Margin di CSS
Margin juga merupakan spasi atau ruang kosong di dalam Box Model. Bedanya, margin berada di luar konten yang kita gunakan, margin di gunakan untuk membatasi antar element. bisa dilihat gambar di bawah ini posisi margin berada di bagian paling luar Model box.
Properti margin dalam CSS untuk setiap sisi elemen:
margin-topmargin-rightmargin-bottommargin-left
Semua properti margin dapat memiliki nilai-nilai berikut:
- auto – browser menghitung margin
- length – menentukan margin dalam px, pt, cm, dll.
- % – menentukan margin dalam% dari lebar elemen yang mengandung
- mewarisi – menetapkan bahwa margin harus diwarisi dari elemen induk
dalam penulisan margin di css ada 2 cara yang berbeda yaitu :
Margin – Individual Sides
Margin – Individual Sides dengan menuliskan jumlah setiap properti margin, mulai dari top, bottom, right, dan left contohnya seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html> <head> <style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue; } </style> </head> <body> <h2>Penggunaan Margin - Individual Sides</h2> <div>dalam elemen div ini setiap properti margin di beri nilai sebagai berikut top margin of 100px, right margin of 150px, bottom margin of 100px, dan left margin of 80px.</div> </body> </html> |
Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat menghapus property margin-bottom dan perhatikan perbedaannya.
selain menggunakan px untuk menentukan nilai dari setiap properti css, anda juga bisa menggunakan % (persen) untuk menentukan setiap propertinya seperti contoh di bawah ini :
|
1 2 3 4 5 6 |
div { margin-top: 15%; margin-bottom: 150px; margin-right: 150px; margin-left: 10%; } |
Terlihat perbedaannya dalam penggunaan %(persen) , jarak akan otomatis berubah mengikuti berapa besar halaman dari webnya, untuk melihat perbedaannya anda bisa memperkecil browser atau inspect elemen.
Margin – Shorthand Property
Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti.
ka marginproperti memiliki empat nilai:
- margin: 25px 50px 75px 100px;
- margin atas adalah 25px
- margin kanan adalah 50px
- margin bawah adalah 75px
- margin kiri adalah 100px
|
1 2 3 |
div { margin: 25px 50px 75px 100px; } |
bisa dilihat di code diatas penggunaan Shorthand Property akan mempersingkat codingan yang kita buat.
begitulah pengguaan margin dalam css, di tutorial selanjutnya kita akan bertemu dalam tutorial penggunaan padding di css. salam coder.
