Menggenggam Perbedaan Antara Padding dan Margin di Desain Web

Bedakan keduanya dengan panduan ini

Jika Anda tidak tahu apa perbedaan antara padding dan margin, Anda tidak sendirian. Ini adalah pertanyaan yang sering ditanyakan dan telah membingungkan banyak perancang web . Dengan tutorial singkat ini, pelajari cara membedakan keduanya.

Memahami Perbedaannya

Margin dan padding dapat membingungkan bagi perancang Web pemula dan terkadang bahkan desainer dengan lebih banyak pengalaman. Lagi pula, dalam beberapa hal, mereka tampak seperti hal yang sama: ruang putih di sekitar gambar atau objek.

Padding hanyalah ruang di dalam perbatasan antara perbatasan dan gambar atau isi sel yang sebenarnya. Pada gambar, padding adalah area kuning di sekitar konten. Perhatikan bahwa padding benar-benar mengelilingi isi. Anda akan menemukan bantalan di sisi atas, bawah, kanan dan kiri.

Di sisi lain, margin adalah ruang di luar perbatasan, antara perbatasan dan elemen lain di sebelah objek ini. Pada gambar, margin adalah area yang terang di luar seluruh objek. Perhatikan bahwa, seperti padding, margin benar-benar mengelilingi isi. Ada margin di sisi atas, bawah, kanan dan kiri.

Tips Berguna

Perlu diingat bahwa jika Anda berencana untuk melakukan hal-hal yang benar-benar mewah dengan margin dan padding yang beberapa browser, seperti Internet Explorer, jangan menerapkan model kotak dengan benar. Ini berarti bahwa halaman Anda akan terlihat berbeda (dan terkadang sangat berbeda) di browser lain.