Margin lwn Padding
Perbezaan antara margin dan padding merupakan aspek penting dalam CSS kerana margin dan padding ialah dua konsep penting yang digunakan dalam CSS untuk menyediakan jarak antara item yang berbeza. Padding dan margin tidak boleh ditukar ganti dan mempunyai tujuan yang berbeza jadi mesti digunakan dengan sewajarnya. Pelapik ialah ruang antara kandungan dan sempadan blok. Margin, sebaliknya, ialah ruang di luar sempadan blok. Margin memisahkan blok daripada blok bersebelahan manakala padding memisahkan jidar daripada kandungan.
Apakah itu Padding?
Dalam CSS (Cascading Style Sheets), padding ialah ruang yang disimpan di antara kandungan dan sempadan. Ia memisahkan kandungan blok dari tepinya. Pelapik adalah telus dan termasuk imej latar belakang atau warna latar belakang elemen, juga. Jumlah padding elemen ditentukan dengan menggunakan istilah "padding" dalam kod CSS. Contohnya, untuk menambah padding 25px di sekeliling kandungan kod berikut boleh digunakan.
div {
lebar: 300px;
tinggi: 300px;
padding: 25px;
sempadan: 25px pepejal;
}
Jika perlu, nilai padding yang berbeza boleh ditentukan secara berasingan untuk kiri, kanan, atas dan bawah juga. Sekeping kod berikut menentukan nilai padding yang berbeza untuk setiap sisi.
div {
lebar: 300px;
tinggi: 300px;
padding-top: 25px;
padding-bawah: 35px;
padding-left: 5px;
padding-right: 10px;
sempadan: 25px pepejal;
}
Apakah Margin?
Dalam CSS (Cascading Style Sheets), margin ialah ruang di luar sempadan. Ia memisahkan blok daripada blok lain. Jidar juga telus, tetapi perbezaan yang besar dengan padding ialah margin tidak termasuk imej latar belakang atau warna latar belakang yang digunakan pada elemen. Jumlah margin dalam CSS ditentukan menggunakan istilah "margin". Sekeping kod berikut menggunakan jidar 25px di sekeliling blok div.
div {
lebar: 320px;
tinggi: 320px;
sempadan: 5px pepejal;
margin: 25px;
}
Nilai yang berbeza boleh ditentukan untuk sisi blok yang berbeza juga. Sekeping kod berikut menggunakan nilai margin yang berbeza untuk setiap sisi.
div {
lebar: 320px;
tinggi: 320px;
sempadan: 5px pepejal;
margin-top: 25px;
margin-bawah: 35px;
margin-kiri: 5px;
margin-kanan: 10px;
}
Apakah perbezaan antara Margin dan Padding?
• Pelapik ialah ruang antara sempadan dan kandungan manakala jidar ialah ruang di luar sempadan.
• Pelapik memisahkan kandungan blok daripada sempadan. Jidar memisahkan satu blok daripada yang lain.
• Padding terdiri daripada imej latar belakang dan warna latar belakang yang digunakan pada kandungan manakala margin tidak mengandungi seperti itu.
• Margin blok bersebelahan boleh bertindih manakala pelapik tidak bertindih.
Ringkasan:
Padding lwn Margin
Padding ialah ruang di dalam sempadan blok yang memisahkan sempadan daripada kandungan. Jidar ialah jarak di luar sempadan yang memisahkan blok daripada blok bersebelahan. Perbezaan lain ialah padding termasuk imej latar belakang dan warna latar belakang yang digunakan di sekeliling kandungan manakala margin tidak mengandunginya. Jidar blok bersebelahan kadangkala mungkin bertindih apabila penyemak imbas memaparkan halaman tetapi untuk mengalas perkara sedemikian tidak akan berlaku.
