margin digunakan untuk memberikan jarak diluar konten.
Seperti contoh dibawah ini:
Pada contoh diatas, ketiga elemen memiliki jarak yang berbeda. Elemen pertama memiliki jarak lebih pendek dibanding dengan
jarak elemen kedua ke elemen ketiga. Itu dikarenakan elemen kedua memiliki class yang beda dibanding elemen pertama.
Berikut class BebyKit yang dapat digunakan untuk memberikan margin
pada elemen HTML kamu:
| Semua Sisi | Sisi Kanan & Kiri | Sisi Atas & Bawah | Sisi Atas | Sisi Kanan | Sisi Bawah | Sisi Kiri |
|---|---|---|---|---|---|---|
margin-none |
margin-x-none |
margin-y-none |
margin-top-none |
margin-right-none |
margin-bottom-none |
margin-left-none |
margin-auto |
margin-x-auto |
margin-y-auto |
margin-top-auto |
margin-right-auto |
margin-bottom-auto |
margin-left-auto |
margin-1 |
margin-x-1 |
margin-y-1 |
margin-top-1 |
margin-right-1 |
margin-bottom-1 |
margin-left-1 |
margin-2 |
margin-x-2 |
margin-y-2 |
margin-top-2 |
margin-right-2 |
margin-bottom-2 |
margin-left-2 |
margin-3 |
margin-x-3 |
margin-y-3 |
margin-top-3 |
margin-right-3 |
margin-bottom-3 |
margin-left-3 |
margin-4 |
margin-x-4 |
margin-y-4 |
margin-top-4 |
margin-right-4 |
margin-bottom-4 |
margin-left-4 |
margin-5 |
margin-x-5 |
margin-y-5 |
margin-top-5 |
margin-right-5 |
margin-bottom-5 |
margin-left-5 |
margin-6 |
margin-x-6 |
margin-y-6 |
margin-top-6 |
margin-right-6 |
margin-bottom-6 |
margin-left-6 |
margin-7 |
margin-x-7 |
margin-y-7 |
margin-top-7 |
margin-right-7 |
margin-bottom-7 |
margin-left-7 |
margin-8 |
margin-x-8 |
margin-y-8 |
margin-top-8 |
margin-right-8 |
margin-bottom-8 |
margin-left-8 |
margin-9 |
margin-x-9 |
margin-y-9 |
margin-top-9 |
margin-right-9 |
margin-bottom-9 |
margin-left-9 |
margin-10 |
margin-x-10 |
margin-y-10 |
margin-top-10 |
margin-right-10 |
margin-bottom-10 |
margin-left-10 |
<div class="margin-1">
<!-- konten -->
</div>
Kamu dapat mengurangi jarak margin dengan menambahkan kata kunci decrease setelah margin.
| Semua Sisi | Sisi Kanan & Kiri | Sisi Atas & Bawah | Sisi Atas | Sisi Kanan | Sisi Bawah | Sisi Kiri |
|---|---|---|---|---|---|---|
margin-decrease-none |
margin-decrease-x-none |
margin-decrease-y-none |
margin-decrease-top-none |
margin-decrease-right-none |
margin-decrease-bottom-none |
margin-decrease-left-none |
margin-decrease-1 |
margin-decrease-x-1 |
margin-decrease-y-1 |
margin-decrease-top-1 |
margin-decrease-right-1 |
margin-decrease-bottom-1 |
margin-decrease-left-1 |
margin-decrease-2 |
margin-decrease-x-2 |
margin-decrease-y-2 |
margin-decrease-top-2 |
margin-decrease-right-2 |
margin-decrease-bottom-2 |
margin-decrease-left-2 |
margin-decrease-3 |
margin-decrease-x-3 |
margin-decrease-y-3 |
margin-decrease-top-3 |
margin-decrease-right-3 |
margin-decrease-bottom-3 |
margin-decrease-left-3 |
margin-decrease-4 |
margin-decrease-x-4 |
margin-decrease-y-4 |
margin-decrease-top-4 |
margin-decrease-right-4 |
margin-decrease-bottom-4 |
margin-decrease-left-4 |
margin-decrease-5 |
margin-decrease-x-5 |
margin-decrease-y-5 |
margin-decrease-top-5 |
margin-decrease-right-5 |
margin-decrease-bottom-5 |
margin-decrease-left-5 |
margin-decrease-6 |
margin-decrease-x-6 |
margin-decrease-y-6 |
margin-decrease-top-6 |
margin-decrease-right-6 |
margin-decrease-bottom-6 |
margin-decrease-left-6 |
margin-decrease-7 |
margin-decrease-x-7 |
margin-decrease-y-7 |
margin-decrease-top-7 |
margin-decrease-right-7 |
margin-decrease-bottom-7 |
margin-decrease-left-7 |
margin-decrease-8 |
margin-decrease-x-8 |
margin-decrease-y-8 |
margin-decrease-top-8 |
margin-decrease-right-8 |
margin-decrease-bottom-8 |
margin-decrease-left-8 |
margin-decrease-9 |
margin-decrease-x-9 |
margin-decrease-y-9 |
margin-decrease-top-9 |
margin-decrease-right-9 |
margin-decrease-bottom-9 |
margin-decrease-left-9 |
margin-decrease-10 |
margin-decrease-x-10 |
margin-decrease-y-10 |
margin-decrease-top-10 |
margin-decrease-right-10 |
margin-decrease-bottom-10 |
margin-decrease-left-10 |
<div class="margin-decrease-1">
<!-- konten -->
</div>