Margin vs. Padding dalam CSS: Apakah Perbezaan Utama dalam Jarak Elemen?

Memahami Margin lwn. Padding dalam CSS

CSS menyediakan dua sifat penting untuk mengurus jarak dan saiz elemen: margin dan padding. Memahami perbezaan utama antara sifat ini adalah penting untuk reka bentuk web yang berkesan.

Margin vs. Padding

Perbezaan utama antara margin dan padding terletak pada tingkah laku mereka berkenaan pertindihan menegak . Jidar dianggap bahagian luar unsur dan boleh bertindih apabila unsur bersebelahan mempunyai jidar. Sebaliknya, pelapik dianggap sebagai bahagian penting elemen dan tidak bertindih.

Kesan pada Jarak Elemen

Jing dan pelapik mempunyai kesan yang berbeza-beza pada jarak antara unsur bersebelahan. Dengan padding, ruang antara kandungan elemen kekal sama, walaupun apabila padding elemen bersebelahan digunakan. Walau bagaimanapun, apabila jidar digunakan sebaliknya, ruang antara elemen berkurangan kerana jidar bertindih.

Bidang Aplikasi

Pelapik sesuai untuk mencipta jarak dalam elemen, hanya menjejaskan kawasan dalam. Kehadirannya ditunjukkan dalam kawasan klik elemen dan warna latar belakang atau imej. Margin, sebaliknya, menambah ruang di luar sempadan elemen, mewujudkan jurang antaranya dan unsur jiran. Margin kerap digunakan untuk mencapai jarak yang konsisten, tanpa mengira elemen bersebelahan.

Demonstrasi Visual

Pertimbangkan kod berikut:

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Demonstrasi ini menggambarkan bagaimana padding mencipta ruang dalam elemen, manakala margin menambah ruang antara mereka.

Atas ialah kandungan terperinci Margin vs. Padding dalam CSS: Apakah Perbezaan Utama dalam Jarak Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!