padding digunakan untuk memberikan jarak didalam konten.
Seperti contoh dibawah ini:
Pada contoh diatas, elemen berwarna biru di dalam kotak tersebut memberikan jarak kepada wadahnya, garis hitam.
Berikut class BebyKit yang dapat digunakan untuk memberikan padding
pada elemen HTML kamu:
| Semua Sisi | Sisi Kanan & Kiri | Sisi Atas & Bawah | Sisi Atas | Sisi Kanan | Sisi Bawah | Sisi Kiri |
|---|---|---|---|---|---|---|
padding-none |
padding-x-none |
padding-y-none |
padding-top-none |
padding-right-none |
padding-bottom-none |
padding-left-none |
padding-auto |
padding-x-auto |
padding-y-auto |
padding-top-auto |
padding-right-auto |
padding-bottom-auto |
padding-left-auto |
padding-1 |
padding-x-1 |
padding-y-1 |
padding-top-1 |
padding-right-1 |
padding-bottom-1 |
padding-left-1 |
padding-2 |
padding-x-2 |
padding-y-2 |
padding-top-2 |
padding-right-2 |
padding-bottom-2 |
padding-left-2 |
padding-3 |
padding-x-3 |
padding-y-3 |
padding-top-3 |
padding-right-3 |
padding-bottom-3 |
padding-left-3 |
padding-4 |
padding-x-4 |
padding-y-4 |
padding-top-4 |
padding-right-4 |
padding-bottom-4 |
padding-left-4 |
padding-5 |
padding-x-5 |
padding-y-5 |
padding-top-5 |
padding-right-5 |
padding-bottom-5 |
padding-left-5 |
padding-6 |
padding-x-6 |
padding-y-6 |
padding-top-6 |
padding-right-6 |
padding-bottom-6 |
padding-left-6 |
padding-7 |
padding-x-7 |
padding-y-7 |
padding-top-7 |
padding-right-7 |
padding-bottom-7 |
padding-left-7 |
padding-8 |
padding-x-8 |
padding-y-8 |
padding-top-8 |
padding-right-8 |
padding-bottom-8 |
padding-left-8 |
padding-9 |
padding-x-9 |
padding-y-9 |
padding-top-9 |
padding-right-9 |
padding-bottom-9 |
padding-left-9 |
padding-10 |
padding-x-10 |
padding-y-10 |
padding-top-10 |
padding-right-10 |
padding-bottom-10 |
padding-left-10 |
<div class="padding-1">
<!-- konten -->
</div>