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:- Margin
- Border
- Padding
- Konten
![]() |
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 :)
margin itu pembatas paling luar, padding itu yang pagarnya konten
BalasHapus