SIAP | Sistem Informasi Anak Pintar

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?