Margin vs Padding
Perbedaan antara margin dan padding merupakan aspek penting dalam CSS karena margin dan padding adalah dua konsep penting yang digunakan dalam CSS untuk memberikan 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 batas blok. Margin memisahkan blok dari blok yang berdekatan sedangkan padding memisahkan batas dari konten.
Apa itu Padding?
Dalam CSS (Cascading Style Sheets), padding adalah ruang yang disimpan antara konten dan perbatasan. Ini memisahkan konten blok dari tepinya. Padding transparan dan termasuk gambar latar belakang atau warna latar belakang elemen, juga. Jumlah padding 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;
border: 25px solid;
}
Jika perlu, nilai padding yang berbeda dapat ditentukan secara terpisah untuk kiri, kanan, atas, dan bawah juga. Potongan 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;
border: 25px solid;
}
Apa itu Margin?
Dalam CSS (Cascading Style Sheets), margin adalah ruang di luar batas. Ini memisahkan satu blok dari blok lainnya. Margin juga transparan, tetapi perbedaan besar dengan padding adalah bahwa margin tidak menyertakan gambar latar belakang atau warna latar belakang yang diterapkan pada elemen. Jumlah margin dalam CSS ditentukan menggunakan istilah "margin". Potongan kode berikut menerapkan margin 25px di sekitar blok div.
div {
lebar: 320px;
tinggi: 320px;
border: 5px solid;
margin: 25px;
}
Nilai yang berbeda juga dapat ditentukan untuk sisi blok yang berbeda. Potongan kode berikut menerapkan nilai margin yang berbeda untuk setiap sisi.
div {
lebar: 320px;
tinggi: 320px;
border: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-kiri: 5px;
margin-kanan: 10px;
}
Apa perbedaan antara Margin dan Padding?
• Padding adalah spasi antara border dan konten sedangkan margin adalah spasi di luar border.
• Padding memisahkan konten blok dari perbatasan. Margin memisahkan satu blok dari yang lain.
• Padding terdiri dari gambar latar belakang dan warna latar belakang yang diterapkan pada konten sedangkan margin tidak berisi konten tersebut.
• Margin dari blok yang berdekatan dapat tumpang tindih sedangkan padding tidak tumpang tindih.
Ringkasan:
Padding vs Margin
Padding adalah ruang di dalam batas blok yang memisahkan batas 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 memuatnya. Margin blok yang berdekatan terkadang tumpang tindih ketika browser merender halaman tetapi untuk padding hal seperti itu tidak akan terjadi.
