Apa itu Margin dan Padding dalam website ?

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 :

KamusInternet.com

Segala Hal Tentang Internet

Related Articles

URL Slug Website

URL Slug Website

Q : Apakah yang dimaksud dengan slug pada website ? A : Slug pada website adalah tulisan atau alamat URL setelah backslash (" / ") suatu website yang biasanya menunjukkan halaman atau post tertentu. Misalnya saja alamat domain website anda adalah domainanda.com, maka...

1 Comment

  1. Jd2

    Thanks posting nya sangat bermanfaat

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *