Perbezaan Antara Margin dan Padding

Margin vs Padding
 

Perbezaan antara margin dan padding adalah aspek penting dalam CSS sebagai margin dan padding adalah dua konsep penting yang digunakan dalam CSS untuk menyediakan jarak antara barang yang berbeza. Padding dan margin tidak boleh dipertukarkan dan mempunyai tujuan yang berlainan supaya mesti digunakan dengan sewajarnya. Padding adalah ruang antara kandungan dan sempadan blok. Margin, sebaliknya, adalah ruang luar sempadan blok. Margin memisahkan blok dari blok bersebelahan sementara padding memisahkan sempadan dari kandungan.

Apa itu Padding?

Dalam CSS (Cascading Style Sheets), padding adalah ruang yang disimpan di antara kandungan dan sempadan. Ia memisahkan kandungan blok dari kelebihannya. Padding itu telus dan termasuk imej latar belakang atau warna latar belakang elemen, juga. Jumlah padding elemen ditentukan dengan menggunakan istilah "padding" dalam kod CSS. Sebagai contoh, untuk menambah padding 25px di sekitar kandungan kod berikut boleh digunakan.

div
lebar: 300px;
ketinggian: 300px;
padding: 25px;
sempadan: pepejal 25px;

Jika perlu, nilai padding 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;
ketinggian: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
sempadan: pepejal 25px;

Apakah Margin itu?

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 padding ialah margin tidak termasuk gambar latar belakang atau warna latar belakang yang diterapkan pada elemen. Jumlah margin dalam CSS ditentukan menggunakan istilah "margin". Sekeping kod berikut menggunakan margin 25px di sekitar blok div.

div
lebar: 320px;
ketinggian: 320px;
sempadan: pepejal 5px;
margin: 25px;

Nilai yang berbeza boleh ditentukan untuk sisi yang berbeza dari blok, juga. Sekeping kod berikut menggunakan nilai margin yang berbeza untuk setiap sisi.

div
lebar: 320px;
ketinggian: 320px;
sempadan: pepejal 5px;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;

Apakah perbezaan antara Margin dan Padding?

• Padding adalah ruang antara sempadan dan kandungan manakala margin adalah ruang di luar sempadan.

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

• Padding terdiri daripada imej latar belakang dan warna latar belakang yang diterapkan pada kandungan manakala marginnya tidak dipenuhi.

• Margin blok bersebelahan boleh bertindih sementara padding tidak bertindih.

Ringkasan:

Padding vs Margin

Padding adalah ruang di dalam sempadan blok yang memisahkan sempadan dari kandungan. Margin adalah jarak di luar sempadan yang memisahkan blok dari blok bersebelahan. Perbezaan lain ialah padding termasuk gambar latar belakang dan warna latar belakang yang digunakan di sekitar kandungan manakala margin tidak mengandunginya. Margin blok bersebelahan kadangkala bertindih apabila pelayar menyebabkan halaman tetapi padding tidak akan berlaku.

Imej Hormat:

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