Margin vs. Padding dalam CSS: Apakah Perbezaan dan Bila Untuk Menggunakan Setiap?

Memahami Perbezaan Antara Margin dan Padding dalam CSS

Apabila bekerja dengan CSS, adalah penting untuk membezakan antara margin dan padding. Kedua-dua sifat mempengaruhi jarak elemen halaman, tetapi ia melakukannya dengan cara yang berbeza.

Margin

• Mentakrifkan ruang di luar sempadan elemen.
• Boleh bertindih dengan jidar unsur jiran.
• Tidak termasuk dalam kawasan boleh klik elemen atau warna latar belakang/imej.

Padding

• Mentakrifkan ruang dalam kawasan kandungan elemen.
• Memelihara ruang antara elemen, walaupun apabila elemen bersebelahan mempunyai pelapik.
• Termasuk dalam kawasan dan latar belakang yang boleh diklik elemen warna/imej.

Bila Menggunakan Margin atau Padding

Memahami perbezaan ini, tentukan masa untuk menggunakan margin atau padding adalah penting:

• Gunakan jidar apabila anda ingin mengekalkan jarak tertentu antara unsur, tanpa mengira unsur tersebut persekitaran.
• Gunakan padding apabila anda ingin menambah ruang di sekeliling kandungan elemen, termasuk mempengaruhi saiz dan kebolehklikannya.

Contoh

Coretan di bawah menunjukkan perbezaan antara jidar dan pelapik secara visual. Ia menggunakan dua elemen dalam kotak yang mengandungi:

<div>
<p><strong>Lalai:</strong></p>
<p>Elemen diletakkan bersebelahan tanpa jarak tambahan.</p>
<p><strong>Padding:</strong></p>
<pre class="brush:php;toolbar:false"><div>
<p>Menambahkan 20px padding pada bahagian atas setiap elemen meningkatkan ruang di antara mereka sambil mengekalkan ruang dalam elemen itu sendiri.</p>
<p><strong>Margin:</strong></p>
<pre class="brush:php;toolbar:false"><div><p>Menambah 20px jidar ke bahagian atas setiap elemen elemen juga meningkatkan ruang di antara mereka, tetapi ruang antara kandungan elemen kekal sama. Tambahan pula, jika elemen mempunyai peristiwa klik yang ditetapkan, kawasan boleh klik hanya akan merangkumi kandungan dan bukan margin.</p></div>