Margin dan padding dapat membingungkan karena, dalam beberapa hal, tampak seperti hal yang sama: ruang putih di sekitar gambar atau objek. Inilah yang perlu Anda sebagai perancang web ketahui tentang perbedaan mereka.
Padding
Padding adalah ruang antara gambar atau konten sel dan batas luarnya. Pada gambar di bawah, padding adalah area kuning di sekitar konten. Dalam hal ini, padding sepenuhnya mengelilingi konten: sisi atas, bawah, kanan, dan kiri. Anda dapat menentukan berapa banyak padding (dalam persentase, piksel, poin, dll.) untuk setiap sisi, dan tidak harus sama. Dengan cara ini, Anda dapat memposisikan konten dalam sebuah elemen.
Margin
Sebaliknya, margin adalah ruang di luar batas elemen, antara elemen dan apa pun yang berdekatan dengannya. Pada gambar, margin adalah area putih di luar seluruh objek. Seperti padding, margin sepenuhnya mengelilingi konten dalam contoh ini: di sisi atas, bawah, kanan, dan kiri. Anda dapat menggunakan margin untuk memposisikan div dan elemen lain pada halaman.
Selalu uji halaman Anda di berbagai browser, sistem operasi (termasuk seluler), dan ukuran layar untuk memastikan halaman ditampilkan persis seperti yang Anda inginkan.
