Perbedaan Antara Margin dan Padding

Margin vs Padding
 

Perbedaan antara margin dan bantalan adalah aspek penting dalam CSS sebagai margin dan padding adalah dua konsep penting yang digunakan dalam CSS untuk menyediakan jarak antar item yang berbeda. Padding dan margin tidak dapat dipertukarkan dan memiliki tujuan yang berbeda sehingga harus digunakan dengan tepat. Padding adalah ruang antara konten dan batas blok. Margin, di sisi lain, adalah ruang di luar perbatasan blok. Margin memisahkan blok dari blok yang berdekatan sementara padding memisahkan perbatasan dari konten.

Apa itu Padding??

Dalam CSS (Lembar Gaya Cascading), padding adalah ruang yang disimpan antara konten dan perbatasan. Ini memisahkan konten blok dari ujungnya. Padding transparan dan termasuk gambar latar belakang atau warna latar belakang elemen. Jumlah padding suatu elemen ditentukan dengan menggunakan istilah "padding" dalam kode CSS. Misalnya, untuk menambahkan padding 25px di sekitar konten, kode berikut dapat digunakan.

div
lebar: 300px;
tinggi: 300px;
padding: 25px;
perbatasan: 25px solid;

Jika perlu, nilai padding yang berbeda dapat ditentukan secara terpisah untuk kiri, kanan, atas, dan bawah juga. Sepotong kode berikut menentukan nilai padding yang berbeda untuk setiap sisi.

div
lebar: 300px;
tinggi: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
perbatasan: 25px solid;

Apa itu Margin??

Dalam CSS (Cascading Style Sheets), margin adalah ruang di luar perbatasan. Ini memisahkan blok dari blok lainnya. Margin juga transparan, tetapi perbedaan besar dengan bantalan adalah bahwa margin tidak termasuk gambar latar belakang atau warna latar belakang yang diterapkan pada elemen. Jumlah margin dalam CSS ditentukan menggunakan istilah "margin". Sepotong kode berikut menerapkan margin 25px di sekitar blok div.

div
lebar: 320px;
tinggi: 320px;
perbatasan: 5px solid;
margin: 25px;

Nilai yang berbeda juga dapat ditentukan untuk sisi blok yang berbeda. Sepotong kode berikut menerapkan nilai margin yang berbeda untuk setiap sisi.

div
lebar: 320px;
tinggi: 320px;
perbatasan: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-kiri: 5px;
margin-right: 10px;

Apa perbedaan antara Margin dan Padding?

• Padding adalah ruang antara perbatasan dan konten sedangkan margin adalah ruang di luar perbatasan.

• Padding memisahkan konten blok dari perbatasan. Margin memisahkan satu blok dari yang lainnya.

• Padding terdiri dari gambar latar belakang dan warna latar belakang yang diterapkan untuk konten sementara margin tidak konten seperti itu.

• Margin blok yang berdekatan dapat tumpang tindih sementara bantalan tidak tumpang tindih.

Ringkasan:

Padding vs Margin

Padding adalah ruang di dalam batas blok yang memisahkan perbatasan dari konten. Margin adalah jarak di luar perbatasan yang memisahkan blok dari blok yang berdekatan. Perbedaan lainnya adalah padding menyertakan gambar latar belakang dan warna latar belakang yang diterapkan di sekitar konten sementara margin tidak mengandungnya. Margin blok yang berdekatan kadang-kadang mungkin tumpang tindih ketika browser membuat halaman tetapi untuk padding hal seperti itu tidak akan terjadi.

Gambar:

1. Model kotak CSS oleh Felix.leg (CC BY-SA 3.0)