Perbedaan Antara Margin Dan Padding

2024 Pengarang: Mildred Bawerman | [email protected]. Terakhir diubah: 2023-12-16 08:39

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 antara item yang berbeda. Padding dan margin tidak dapat saling 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 sementara padding memisahkan batas dari konten.

Apa itu Padding?

Dalam CSS (Cascading Style Sheets), padding adalah ruang antara konten dan border. Ini memisahkan konten blok dari tepinya. Paddingnya transparan dan menyertakan gambar latar belakang atau warna latar belakang elemen tersebut. 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 {

width: 300px;

tinggi: 300px;

bantalan: 25px;

batas: padat 25 piksel;

}

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 {

width: 300px;

tinggi: 300px;

padding-top: 25px;

padding-bottom: 35px;

padding-left: 5px;

padding-right: 10px;

batas: padat 25 piksel;

}

Apa itu Margin?

Dalam CSS (Cascading Style Sheets), margin adalah ruang di luar batas. Ini memisahkan satu blok dari blok lain. Marginnya juga transparan, tetapi perbedaan besar dengan padding adalah margin tidak menyertakan gambar latar belakang atau warna latar belakang yang diterapkan ke elemen. Jumlah margin di CSS ditentukan dengan menggunakan istilah "margin". Potongan kode berikut menerapkan margin 25px di sekitar blok div.

div {

width: 320px;

tinggi: 320px;

batas: 5px solid;

margin: 25px;

}

Nilai yang berbeda juga dapat ditentukan untuk sisi balok yang berbeda. Potongan kode berikut menerapkan nilai margin yang berbeda untuk setiap sisi.

div {

width: 320px;

tinggi: 320px;

batas: 5px solid;

margin-top: 25px;

margin bawah: 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.

• Pengisi terdiri dari gambar latar belakang dan warna latar belakang yang diterapkan pada konten, sedangkan margin tidak mencakup konten tersebut.

• Margin dari blok yang berdekatan bisa tumpang tindih sementara padding tidak tumpang tindih.

Ringkasan:

Padding vs Margin

Pengisi adalah ruang di dalam batas blok yang memisahkan batas dari konten. Margin adalah jarak di luar batas yang memisahkan satu 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 dari blok yang berdekatan terkadang tumpang tindih ketika browser merender halaman tetapi untuk padding hal seperti itu tidak akan terjadi.

Gambar Courtesy: