Perbezaan Antara Margin Dan Padding

2024 Pengarang: Mildred Bawerman | [email protected]. Diubah suai terakhir: 2023-12-16 08:40

Margin vs Padding

Perbezaan antara margin dan padding adalah aspek penting dalam CSS kerana margin dan padding adalah dua konsep penting yang digunakan dalam CSS untuk memberikan jarak antara item yang berbeza. Padding dan margin tidak boleh ditukar ganti dan mempunyai tujuan yang berbeza sehingga mesti digunakan dengan tepat. Padding adalah ruang antara kandungan dan sempadan blok. Margin, di sisi lain, adalah ruang di luar sempadan blok. Margin memisahkan blok dari blok bersebelahan sementara padding memisahkan sempadan dari isi.

Apa itu Padding?

Dalam CSS (Cascading Style Sheets), padding adalah ruang yang disimpan di antara kandungan dan sempadan. Ia memisahkan kandungan blok dari pinggirnya. Padnya telus dan merangkumi gambar latar atau warna latar elemen. Jumlah padding elemen ditentukan dengan menggunakan istilah "padding" dalam kod CSS. Sebagai contoh, untuk menambahkan padding 25px di sekitar kandungan, kod berikut boleh digunakan.

div {

lebar: 300px;

tinggi: 300px;

pembalut: 25px;

sempadan: pepejal 25px;

}

Sekiranya perlu, nilai padding yang berbeza dapat ditentukan secara berasingan untuk kiri, kanan, atas dan bawah juga. Bahagian kod berikut menentukan nilai padding yang berbeza untuk setiap sisi.

div {

lebar: 300px;

tinggi: 300px;

padding-top: 25 piksel;

padding-bottom: 35px;

padding-kiri: 5px;

padding-right: 10px;

sempadan: pepejal 25px;

}

Apa itu Margin?

Dalam CSS (Cascading Style Sheets), margin adalah ruang di luar sempadan. Ia memisahkan blok dari blok lain. Margin juga telus, tetapi perbezaan yang besar dengan pelapisan ialah margin tidak termasuk gambar latar atau warna latar yang diterapkan pada elemen. Jumlah margin dalam CSS ditentukan menggunakan istilah "margin". Bahagian kod berikut menerapkan margin 25px di sekitar blok div.

div {

lebar: 320px;

tinggi: 320px;

sempadan: pepejal 5px;

margin: 25 piksel;

}

Nilai yang berbeza juga dapat ditentukan untuk sisi blok yang berlainan. Bahagian kod berikut menggunakan nilai margin yang berbeza untuk setiap sisi.

div {

lebar: 320px;

tinggi: 320px;

sempadan: pepejal 5px;

margin-top: 25 piksel;

margin-bottom: 35px;

margin-kiri: 5px;

margin-right: 10px;

}

Apakah perbezaan antara Margin dan Padding?

• Padding adalah ruang antara sempadan dan isi sementara margin adalah ruang di luar sempadan.

• Padding memisahkan kandungan blok dari sempadan. Margin memisahkan satu blok dari yang lain.

• Padding terdiri daripada gambar latar dan warna latar yang diterapkan pada konten sementara margin tidak memuaskan seperti itu.

• Margin blok bersebelahan boleh bertindih sementara padding tidak bertindih.

Ringkasan:

Padding vs Margin

Padding adalah ruang di dalam sempadan blok yang memisahkan batas dari kandungan. Margin adalah jarak di luar sempadan yang memisahkan blok dari blok bersebelahan. Perbezaan lain ialah padding merangkumi gambar latar dan warna latar yang diterapkan di sekitar kandungan sementara margin tidak mengandunginya. Margin blok bersebelahan kadang-kadang bertindih ketika penyemak imbas membuat halaman tetapi perkara seperti itu tidak akan berlaku.

Gambar ihsan: