margin digunakan untuk memberikan jarak diluar konten.
Seperti contoh dibawah ini:
Tiap elemen diatass memiliki border yang berbeda-beda.
Hal ini dikarenakan class BebyKit memiliki
class yang dapat memberikan styling (warna & ukuran) terhadap masing-masing 4 sisi border yang berbeda.
| Semua Sisi | Sisi Kanan & Kiri | Sisi Atas & Bawah | Sisi Atas | Sisi Kanan | Sisi Bawah | Sisi Kiri |
|---|---|---|---|---|---|---|
border-none |
border-x-none |
border-y-none |
border-top-none |
border-right-none |
border-bottom-none |
border-left-none |
border-1 |
border-x-1 |
border-y-1 |
border-top-1 |
border-right-1 |
border-bottom-1 |
border-left-1 |
border-2 |
border-x-2 |
border-y-2 |
border-top-2 |
border-right-2 |
border-bottom-2 |
border-left-2 |
border-3 |
border-x-3 |
border-y-3 |
border-top-3 |
border-right-3 |
border-bottom-3 |
border-left-3 |
border-4 |
border-x-4 |
border-y-4 |
border-top-4 |
border-right-4 |
border-bottom-4 |
border-left-4 |
border-5 |
border-x-5 |
border-y-5 |
border-top-5 |
border-right-5 |
border-bottom-5 |
border-left-5 |
border-6 |
border-x-6 |
border-y-6 |
border-top-6 |
border-right-6 |
border-bottom-6 |
border-left-6 |
border-7 |
border-x-7 |
border-y-7 |
border-top-7 |
border-right-7 |
border-bottom-7 |
border-left-7 |
border-8 |
border-x-8 |
border-y-8 |
border-top-8 |
border-right-8 |
border-bottom-8 |
border-left-8 |
border-9 |
border-x-9 |
border-y-9 |
border-top-9 |
border-right-9 |
border-bottom-9 |
border-left-9 |
border-10 |
border-x-10 |
border-y-10 |
border-top-10 |
border-right-10 |
border-bottom-10 |
border-left-10 |
<div class="display-block border-top-5 border-right-8 border-bottom-8 border-left-3 border-top-red-2 border-right-blue-5 border-bottom-yellow-3 border-left-orange-6 padding-5 margin-right-5 radius-2" style="width: max-content;">
<div class="display-block background-blue-4 padding-6">
<!-- konten -->
</div>
</div>
Referensi Warna:
Lihat Selengkapnya