Pengertian, Perbedaan dan Cara Penggunaan Margin dan Padding pada CSS

Halo Temans KangBisson semua yang budiman, pada baik-baik saja kan? Ok .. kali ini mari kita bahas mengenai cara penggunaan Padding dan Margin pada CSS

Pada saat kita akan membuat sebuah konten dengan posisi yang kita inginkan, penambahan kode padding dan margin ini tentu sangat membantu, apalagi content tersebut kita tempatkan dalam sebuah kotak dengan atribut border sebagai garis pinggir

Namun pada prakteknya kadang kita sering dibuat bingung dengan meletakan posisi content tepat ditempat yang benar-benar kita inginkan, hal ini mungkin dikarenakan kesalahan pada penempatan content dengan mengabaikan fungsi dari padding dan margin

Maka dari itu, pada kesempatan kali ini KangBisson akan mencoba mengulasnya sejelas mungkin dengan harapan bisa dimengerti dan dipahami dengan mudah

Sebelum kita bahas lebih jauh, mungkin ada baiknya kita uraikan dulu sedikit tentang Pengertian, Perbedaan dan Cara Penggunaan Margin dan Padding pada CSS

Pengertian ( Sekaligus menjelaskan Perbedaan antara keduanya):

• Margin adalah mengatur jarak dari luar


• Padding adalah mengatur jarak dari dalam

Lalu bagaimana cara penggunaannya? Berikut Cara Penggunaan Margin dan Padding pada CSS

Coba perhatikan gambar dibawah

Misalkan kita membuat satu table dengan Margin: 5px; maka space kosong dari border table ke arah luar sebesar 5px tersebut merupakan Margin

Lalu jika membuat satu table dengan Padding: 5px; maka space kosong antara border dengan content sebesar 5px tersebut merupakan Padding

(Dengan mengunakan border pada table maka akan lebih kelihatan jelas perbedaannya)


Contoh Penggunaan Margin dan Padding:

1. Padding

Perhatikan gambar dibawah

Jika kita menuliskan Padding:10px;

Artinya setiap sisi yaitu top/atas, right/kanan, bottom/bawah, left/kiri, sama-sama memiliki jarak kedalam sebesar 10px (yang di beri padding adalah kotak berwarna kuning)

• Padding-top: 10px; Artinya hanya sisi atas yang memiliki jarak 10px


• Padding-right: 10px; Artinya hanya sisi kanan yang memiliki jarak 10px


• Padding-bottom: 10px; Artinya hanya sisi bawah yang memiliki jarak 10px


• Padding-left: 10px; Artinya hanya sisi kiri yang memiliki jarak 10px

Kita juga bisa mempersingkat cara penulisan untuk pengaturan setiap sisi dengan jarak yang berbeda,  seperti contoh berikut:

• Padding: 10px 25px; Artinya 10px tersebut adalah untuk mengatur top dan bottom sedangkan 25px adalah untuk sisi kiri dan sisi kanan


• Padding: 10px 20px 30px 40px; Artinya 10px Top , 20px Right, 30px bottom dan 40px left


• Padding: 10px 20px 30px 0; Artinya 10px top, 20px right, 30px bottom, 0 left


• Padding: 10px 20px 30px; Artinya 10px top, 20px right, 30px bottom, 20px left. Kenapa left 20px ? karena tidak di isi value 0. Maka left akan mengikuti right, yaitu 20px;

Note: Cara baca pengaturannya searah jarum jam yaitu dimulai dari Atas (Top), Kanan (Right), Bawah (Bottom) dan Kiri (Left)

2. Margin

Bagaimana cara penulisan margin? Cara penulisannya sama saja seperti padding. Hanya saja nanti fungsi yang akan berbeda

• Margin:10px


• Margin-top:10px;


• Margin-right:10px;


• Margin-bottom:10px;


• Margin-left:10px;

Begitu juga dengan cara mempersingkat penulisannya

• Margin:10px 25px;


• Margin:10px 20px 30px 40px;


• Margin:10px 20px 30px 0;


• Margin:10px 20px 30px;

Perhatikan gambar dibawah

Jika kotak berwarna biru diberi margin-left sebesar 10px; maka akan bergeser kekanan sebesar 10px;

Gimana? Cukup mudah bukan?

Akan terasa lebih afdol jika kita sembari mempraktekannya. Saya pun sering ngotak ngatik si padding dan si margin ini untuk mengatur posisi agar terlihat lebih rapih ... Selamat mencoba gaess

Demikian tutorial blogging kali ini yang saya beri judul Pengertian, Perbedaan dan Cara Penggunaan Margin dan Padding pada CSS. Semoga artikelnya bermanfaat dan sampai jumpa di artikel berikutnya

Referensi: orangorangan.com, dumetschool.com