Apakah yang dimaksud dengan margin dan padding dalam suatu website ? dan apa perbedaan antara keduanya ?
Berikut adalah pengertiannya
Margin adalah space atau jarak di luar border, sedangkan Padding adalah space atau jarak di dalam border
ini perlu dicamkan dan diingat baik-baik
Mari kita bermain-main atau mencoba-coba merubah-rubah margin dan padding website. Berikut akan diberikan contoh percobaan langsung di website KamusInternet.com yang mana theme yang digunakan adalah Theme DIVI dan tampilan visualnya sudah ada secara jelas untuk konten/module/elemen. Theme lain mungkin menggunakan istilah yang berbeda tapi pada intinya adalah sama. Sebagai contoh perhatikan gambar berikut di bawah adalah tampilan Wireframe, kotak biru (berjudul Fullwidth Ad) adalah kotak section settings, kotak hijau (berjudul Row Segala Hal Tentang Internet) adalah kotak Row Settings, dan kotak hitam/abu-abu (berjudul Segala Hal Tentang Internet) adalah Module/Blurb Settings. Kita akan bermain-main dengan margin dan paddingnya
Sedangkan tampilan di bawah adalah tampilan dekstopnya
Dua gambar di atas adalah sama hanya saja berbeda view (tampilan) nya saja, Module/Blurb settings berapa di dalam kotak Row Settings, kemudian Row Setting berada di dalam kotak Section Settings. Kita akan bermain-main dengan margin dan paddingnya, untuk lebih mengetahui apa arti margin dan padding.
Kita akan bermain dengan padding Row Setting terlebih dahulu , seperti gambar di bawah ini padding awal adalah sebesar 40px , kita nanti akan merubahnya menjadi 90px
Berikut adalah Row Setting nya terlihat seperti gambar di bawah adalah 40px (padding atas) 40 px (padding bawah) , begitu juga sebenarnya dengan padding kanan dan kiri juga sebesar 40px
Kita akan merubah paddingnya menjadi 90px seperti di bawah ini, tampak terlihat bawah jarak paddingnya semakin membesar seperti gambar di bawah ini.
Sekarang kita akan bermain-main dengan margin. Margin adalah space (jarak) yang berada di luar border, kita akan merubah jarak margin untuk Module/blurb setting sehingga tulisannya bisa agak sedikit ke tengah. Perhatikan gambar di bawah ini sebelum dirubah.
Kita dapat melakukan dua cara untuk menambah space (jarak) yg kita inginkan, yang pertama adalah dengan menggunakan padding pada Row Settings (menambah padding pada sebelah kiri Row Settings) hal ini karena tulisan ” Segala Hal Tentang Internet” berada pada kotak Row Settings sehingga bisa diatur dari paddingnya
Cara kedua adalah dengan mengatur margin dari Module/blurb settings, karena jarak ini berada di luar daripada Module/blurbs settings, sehingga kita bisa menambahkan margin sebelah kiri daripada Module/blurb settings. Kita akan menggunakan cara yang kedua yaitu mengatur margin dari Module/blurb settings. Perhatikan gambar berikut setelah dirubah marginnya
Tampak seperti gambar di atas space (jarak) antara kotak dengan tulisan Segala Hal Tentang Internet sudah membesar jaraknya, hal ini karena kita merubah nilai margin daripada Module/blurb settings yang awalnya adalah 0px menjadi 100px seperti gambar di bawah ini.
Demikian penjelasan untuk Margin dan Padding, silahkan mencoba sendiri supaya lebih mahir. Perlu diingat sekali lagi adalah Margin adalah untuk jarak di luar Konten / elemen / module, sedangkan Padding adalah space (jarak) di dalam konten/ elemen / module. Selamat mencoba
Best Regards,
Admin
Baca juga :
Thanks posting nya sangat bermanfaat