Apa Beda Padding dan Margin pada CSS?

Dunia CSS bagi seorang penulis blog kadang menjadi momok tersendiri. Biasanya, untuk orang yang baru belajar CSS, maka hal yang paling membingungkan adalah membedakan padding dan margin. Karena sekilas padding dan margin ini efeknya sama. Namun, tentu tidak mungkin ada dua properti berbeda yang memiliki fungsi sama.

Untuk itu, bagi pemula sangatlah penting mengetahui fungsi-fungsi dari sebuah properti CSS dan dapat membedakannya. Berikut ini adalah ulasan perbedaan antara padding dan margin. Tidak membingungkan jika kamu jeli dalam memahaminya.

Beda Padding dan Margin pada CSS

Pada dunia CSS, ada istilah Box Model. Pada Box Model ini terdapat setidaknya empat elemen, antara lain:

1. Margin
2. Border
3. Padding
4. Konten

Margin adalah elemen terluar Box Model. Sedangkan Konten adalah elemen terdalam Box Model. Jika digambarkan, Box Model seperti gambar di bawah ini.

Box Model

Warna oranye adalah margin. Warna kuning adalah border. Warna hijau adalah padding. Sedangkan, warna biru adalah konten. Sampai di sini, sudah paham?

Hal yang paling mencolok adalah fungsi margin adalah memberikan jarak antara box satu dengan box yang lainnya. Sedangkan fungsi padding adalah memberikan jarak antara konten dan border pada sebuah box.

Padding vs Margin

Dalam sebuah kasus, penggunaan padding untuk memberikan jarak pada sebuah box terhadap parent (induknya) bisa mengakibatkan munculnya blok, dan element dengan index lebih rendah dari box tersebut tidak bisa ditandai/diklik. Untuk itu, jika kamu ingin memberi jarak pada sebuah box, gunakan margin.

Bagaimana? Sudah paham atau malah makin bingung? Jika masih bingung, alangkah baiknya jika langsung mencobanya langsung. Selamat mencoba :)