Margin vs. Padding dalam CSS: Apakah Perbezaannya?

Memahami Perbezaan Antara Margin dan Padding dalam CSS

Dalam CSS, margin dan padding ialah sifat penggayaan penting yang mengawal jarak di sekeliling elemen pada laman web. Walaupun ia kelihatan serupa, ia mempunyai tujuan yang berbeza dan memahami perbezaannya adalah penting untuk penciptaan reka letak yang berkesan.

Margin vs. Padding

• Margin : Margin mencipta ruang antara unsur dan unsur sekelilingnya. Ia menetapkan jarak antara tepi luar elemen dan mana-mana elemen bersebelahan atau tetingkap penyemak imbas.
• Padding: Padding, sebaliknya, mentakrifkan ruang antara kandungan elemen dan sempadannya. Ia menetapkan jarak antara kandungan dan pinggir dalam sempadan elemen.

Contoh: Menjelaskan Perbezaan

Pertimbangkan kod HTML berikut:

<div class="box">
  <h3>Heading</h3>
  <p>Some text</p>
</div>

Dan kod CSS berikut:

.box {
  width: 200px;
  margin: 10px;
  padding: 5px;
  border: 1px solid black;
}

Dalam ini contoh:

• Bidar 10px mencipta ruang 10px di sekeliling bahagian luar div.
• Pelapik 5px mencipta ruang 5px antara kandungan dan sempadan div.

Kepentingan Memahami Perbezaan

Membezakan antara jidar dan padding adalah penting untuk kawalan susun atur yang tepat. Margin mempengaruhi penempatan elemen secara relatif antara satu sama lain, manakala padding mempengaruhi jarak dalaman elemen. Dengan memahami perbezaannya, anda boleh mencipta halaman web yang seimbang secara visual dan tersusun dengan baik di mana elemen diasingkan dan diselaraskan dengan betul.

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