Pengenalan HTML 7
Belajar Padding dan Margin

Margin dalam esensinya, margin adalah ruang kosong yang mengelilingi elemen HTML, berfungsi sebagai “penyangga” yang memisahkan satu elemen dari elemen lainnya. Dengan mengatur margin secara tepat, kita dapat menciptakan harmoni antara konten, gambar, dan komponen lainnya di halaman web. Lebih dari sekadar ruang kosong, margin berperan strategis dalam menentukan bagaimana elemen-elemen tersebut berinteraksi dan dipersepsikan oleh pengunjung situs
cek sumber

Padding adalah sebutan untuk spasi atau ruang diantara konten dan border. Gambar CSS Box Model berikut bisa menjelaskan dimana letak padding ini.

cek sumber

Untuk konsepnya sudah mengerti?

1. Margin

Margin dituliskan dalam class di dalam tag yang akan dilakukan styling menggunakan kata kunci:

• seluruh margin: m-1, m-2, m-3, m-4 atau m-5
• margin sebelah kiri saja: ms-1, ms-2, ms-3, ms-4 atau ms-5 (ms=margin start, start menandakan kiri)
• margin sebelah kanan saja: me-1, me-2, me-3, me-4 atau me-5 (me=margin end, end menandakan kanan)
• margin sebelah atas saja: mt-1, mt-2, mt-3, mt-4 atau mt-5 (mt=margin top, top menandakan atas)
• margin sebelah bawah saja: mb-1, mb-2, mb-3, mb-4 atau mb-5 (mb=margin bottom, bottom menandakan bawah)
• margin sumbu y (vertikal): my-1, my-2, my-3, my-4 atau my-5
• margin sumbu x (horizontal): mx-1, mx-2, mx-3, mx-4 atau mx-5

semakin besar margin, maka pergeseran untuk margin akan semakin besar pula. kita coba?

2. Padding

Dari penjelasan awal tadi yang (agak) panjang, inti dari padding adalah kita menggeser komponen yang ada di dalam margin, tanpa melakukan pergeseran margin. Sehingga bisa dikatakan bawah margin tidak berubah, hanya isi dari yang ada di dalam margin atau div atau tag yang lainnya itulah yang akan bergeser. Padding dituliskan dalam class di dalam tag yang akan dilakukan styling menggunakan kata kunci:

• seluruh padding: p-1, p-2, p-3, p-4 atau p-5
• padding sebelah kiri saja: ps-1, ps-2, ps-3, ps-4 atau ps-5 (ps=padding start, start menandakan kiri)
• padding sebelah kanan saja: pe-1, pe-2, pe-3, pe-4 atau pe-5 (pe=padding end, end menandakan kanan)
• padding sebelah atas saja: pt-1, pt-2, pt-3, pt-4 atau pt-5 (pt=padding top, top menandakan atas)
• padding sebelah bawah saja: pb-1, pb-2, pb-3, pb-4 atau pb-5 (pb=padding bottom, bottom menandakan bawah)
• padding sumbu y (vertikal): py-1, py-2, py-3, py-4 atau py-5
• padding sumbu x (horizontal): px-1, px-2, px-3, px-4 atau px-5

semakin besar padding, maka pergeseran untuk margin akan semakin besar pula. kita coba?

Analogi: bingkai foto di dinding

Bayangkan sebuah foto yang dipasang di dinding. Padding adalah jarak antara foto dan tepi bingkai, sedangkan margin adalah jarak antara bingkai dan bingkai lain di dinding. Menambah padding membuat foto tampak "bernapas" di dalam bingkai, sementara menambah margin menjauhkan bingkai dari tetangganya. Di antara keduanya ada border, yaitu bingkai itu sendiri.

Skala angka pada Bootstrap

Angka 0 sampai 5 pada class seperti m-3 atau p-4 mewakili ukuran yang kelipatan dari satu satuan dasar, yaitu 0,25 rem atau sekitar 4 piksel. Jadi angka 1 kira-kira 4 piksel, 2 sekitar 8 piksel, 3 sekitar 16 piksel, 4 sekitar 24 piksel, dan 5 sekitar 48 piksel. Angka 0 menghapus jarak sama sekali. Bootstrap juga punya mx-auto yang membuat margin kiri dan kanan otomatis sehingga elemen berlebar tetap berada tepat di tengah.

<div class="bg-warning p-4 mb-3">Padding besar, jarak bawah sedang</div>
<div class="bg-info p-1 mb-3">Padding kecil</div>
<div class="bg-success text-white w-50 mx-auto p-3">
    Kotak setengah lebar di tengah halaman
</div>

Kotak pertama memiliki ruang dalam yang lega sehingga tulisannya jauh dari tepi. Kotak kedua cukup rapat. Kotak ketiga memakai w-50 untuk lebar separuh dan mx-auto untuk memposisikannya di tengah. Coba ganti angkanya dan amati perubahan secara langsung; cara belajar terbaik adalah bereksperimen.

Margin yang menyatu

Ada perilaku unik pada margin vertikal: bila dua elemen blok bertumpuk dan masing-masing punya margin atas-bawah, kedua margin itu bisa menyatu dan hanya margin yang terbesar yang dipakai, bukan dijumlahkan. Padding tidak pernah menyatu. Karena itu bila jarak tampak lebih kecil dari perkiraan, periksa apakah margin saling bertemu.

Kesalahan yang sering terjadi

• Tertukar antara ms dan me. Ingat: start berarti kiri, end berarti kanan (pada tulisan kiri ke kanan).
• Memakai margin padahal yang diinginkan adalah ruang di dalam kotak berwarna; margin tidak ikut berwarna latar, padding ikut.
• Menumpuk m-3 dan my-5 sekaligus tanpa sadar sehingga hasilnya membingungkan.
• Membuat jarak dengan banyak <br>, padahal class jarak lebih rapi dan mudah diubah.

Ringkasan

Padding adalah jarak di dalam elemen (antara isi dan tepi), margin adalah jarak di luar elemen. Bootstrap menyediakan skala 0 sampai 5 dengan awalan arah (t, b, s, e, x, y) agar jarak bisa diatur cepat dan seragam.

Latihan

1. Class apa yang memberi jarak bagian atas saja berukuran 4?
   Lihat jawaban

   mt-4 untuk margin atas atau pt-4 untuk padding atas.
2. Bagaimana membuat kotak berlebar separuh yang berada di tengah?
   Lihat jawaban

   Gunakan w-50 mx-auto.
3. Mana yang ikut berwarna saat elemen diberi bg-primary, margin atau padding?
   Lihat jawaban

   Padding. Warna latar mengisi area isi dan padding, tetapi tidak mengisi margin.
4. Apa beda px-3 dan py-3?
   Lihat jawaban

   px-3 mengatur padding kiri dan kanan (sumbu x), py-3 mengatur padding atas dan bawah (sumbu y).