Margin vs Padding, Mana yang lebih baik?

Margin vs Padding, Mana yang lebih baik?

Saat kita membuat desain UI apapun mau itu template website, ataupun aplikasi web, CSS sebagai stylesheet base berperan begitu penting. Peran CSS untuk membuat style dari website tersebut tak lepas dari banyaknya properti-properti yang digunakan seperti background-color, text-decoration, font-style, position sampai properti pembuat jarak antar element seperti margin dan padding.

Ada yang menarik jika kita membahas properti jarak. Namun sebelumnya kita kenalanan dulu sama doi, tak kenal maka tak sayang. Pepatah tersebut sangat cocok menggambarkan keunikan setiap fungsi dari kedua CSS properti ini


Margin dan Padding pada CSS

Margin adalah CSS properti yang digunakan untuk memisahkan jarak atau membuat jarak antar element pada HTML. Jangkauan jarak yang dipisahkan diberi nilai px maupun persen, dan element yang dibuat jarak adalah bagian luar dari element (Parent to parent, Child to Parent). Margin sangat umum di gunakana bagi para pelaku desainer untuk memberi jarak atar element yang di beri gaya agar tidak bertubrukan atau berdempetan. Terkadang juga di buat untuk memberi ancang-ancang animasi sebelum dan sesudahnya (nilai negatif pada properti margin tertentu)

Padding adalah CSS properti yang digunakan untuk memberi jarak element namun untuk element ada bagian dalam (Parent to Child). untuk jangkauan jaraknya sendiri sama seperti margin yaitu diberi nilai px ataupun persen. Padding dikalangan desainer biasa digunakan mengatur antar konten pembungkus dan kontennya sendiri agar tidak terlalu berampitan dan enak dipandang.

Margin vs Padding, Mana yang lebih baik?

Margin vs Padding, mana yang lebih baik?

Ada beberapa hal menarik dari kedua properti ini mungkin desainer pun tidak banyak yang mengetahuinya. Margin dan padding seringkali dipakai namun masih banyak yang asal menerapkannya. Terutama penggunaan margin yang berlebihan. Menurut saya dari kedua properti tersebut yang paling unggul adalah padding. Alasannya karena penggunan padding pada grid sistem pada banyak librari CSS terkenal seperti Bootstrap, Zurb Foundation, Materialize dan lain-lain. berikut uraiannya.

1. Padding bisa menjadi Margin

Jika kamu pecandu bootstrap pastinya tidak asing dengan grid sistem. Pemisah antar kolomnya menggunakan padding bukan margin. Ini menunjukan jika padding pun bisa menjadi margin, hanya saja tidak bisa seperti margin yang memisahkan jarak antara kolom secara langsung, namun padding disini berperan sebagai kerangka (frame) untuk konten grid di dalamnya. Jadi saat kamu membuat grid dengan pemisah padding, kamu harus membuat elemen konten dalam dahulu agar pisahan konten terlihat jelas. ilustrasinya bisa dilihat seperti pada gambar berikut.

Margin vs Padding, Mana yang lebih baik?

Keterangan:
yang berwarna hijau adalah padding yang sudah dikalkulasi agar jarak yang dihasilkan sama setiap konten.

Konsep pemberian kerangka ini mirip seperti pada tabel dimana kita memberi pembatas ada setiap konten dengan garis, hanya saja garis yang dibuat tidak terlihat.

2. Nilai margin akan menambah ukuran elemen, namun padding nilai tidak menambah ukuran elemen

Banyak sekali para desainer website lokal terutama pembuat template blogger yang membuat sistem pemisah jaraknya pada gridnya menggunakan margin, sehingga kamu harus mengurangi nilai ukuran dari elementnya. Berikut ini contoh pemberian nilai pada properti yang buruk seperti pada sistem grid template ****

Margin vs Padding, Mana yang lebih baik?

Pada kasus ini dia membuat tampilan grid dengan CSS properti float:left dan memberi styling pada itemnya seperti diatas dengan mengurangi persentase ukuran item-nya agar bisa dipisahkan dengan margin. ini sangat-sangat sekali tidak direkomendasikan. Pada pembasan sebelumnya di artikel konsep grid disini, saya sudah menegaskan untuk menghindari penggunaan grid saat membuat grid. Alasannya bisa kamu lihat sendiri pada gambar diatas. Nilai width pada item grid 2 kolom harusnya mengikuti kaidah pemberian ukuran pada grid sistem yang kalkulasinya seperti ini:

Margin vs Padding, Mana yang lebih baik?

Kalkulasi seperti diatas adalah nilai kolom grid yang sering saya gunakan untuk membuat template yang rapih juga tertata strukturnya. Juga saya selalu menggunakan padding sebagai pemisah seperti pada nomor 1. Namun ada properti khusus yang harus ditambahkan agar nilai padding tidak bertambah seperti margin yaitu dengan menambahkan properti box-sizing dengan nilai border-box

Margin vs Padding, Mana yang lebih baik?

Agar lebih mudah kita simpan saja sebagai properti menyeluruh (Global) pada css seperti berikut ini:

* {
 box-sizing:border-box;
}

Dengan begitu nilai padding juga tidak akan merubah ukuran dari elemennya.

3. Padding membuat HTML lebih terstruktur

Seperti yang saya jelaskan pada poin kedua, padding juga bisa membuat HTML kamu lebih struktur. Seperti halnya pada pembuatan grid ataupun section lainnya selalu dibuat seperti dibawah ini:

Margin vs Padding, Mana yang lebih baik?Margin vs Padding, Mana yang lebih baik?

Dengan melihat ilustrasinya saja kamu sudah tahu harus meletakan padding dimanakan?. Jika kamu paham akan pembahasan sebelumnnya dan diatas kamu akan secara otomatis mengerti dimana harus menggunakan padding daripada margin. Kurang lebih seperti pada ilustrasi di atas yang sering saya gunakan untuk templating. Setiap Web desainer memiliki ciri khas struktur HTMLnya masing-masing. Namun saran saya jangan gunakan struktur yang berlebihan sehingga kamu sendiri bingung atas kode yang kamu buat. Jadi gunakan se-efisien mungkin.

Kesimpulan

Walaupun saya mengunggulkan penggunaan padding dan menghindari margin, tapi ada kala kita menggunakan margin juga seperti untuk memberi jarak pada section pada navigasi yang stiky, ataupun pada styling untuk thumbnail / gambar agar tulisan tidak berdempetan. Karena untuk memberi jarak pada element yang tidak memerlukan pengaturan jarak menggunakan padding, ya ribet juga tidak seperti pada sistem grid. Selain itu setiap orang memiliki gayanya masing-masing sehingga setiap template yang ada memiliki perbedaan dan keunikan sendiri walaupun kodenya hasil comot.

Kesimpulan yang didapat adalah, maksimalkan penggunaan properti jarak margin dan padding pada css ini, namun gunakan se efisien mungkin sehingga kamu tidak berulang kali mengulang lagi dan lagi kodenya. Saat menggunaan margin terdapat kekurangan, namun menggunakan padding juga tidak jarang menemukan kesulitan. Gunakan seperlunya. Margin vs Padding? kamu yang tentukan sendiri.

Demikian materi fundamental yang bisa saya berikan sesuai dengan pengalaman saya, jika bermanfaat tidak ada salahnya membantu untuk membagikan ke sosial media atau dengan mengklik iklan dibawah ini supaya saldo situs ini terisi XD. See you next time sobat Code Pelajar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel