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>