Margin lwn. Padding dalam CSS: Bagaimanakah Sifat Jarak Ini Berbeza?

Memahami Perbezaan: Margin vs Padding dalam CSS

Dalam melaraskan ruang di sekeliling elemen dalam CSS, dua sifat penting muncul: margin dan padding. Walaupun kedua-duanya digunakan untuk memanipulasi jarak, ia mempamerkan gelagat dan aplikasi yang berbeza.

Auto Runtuh Margin Menegak

Perbezaan asas terletak pada gelagat jidar menegak. Walaupun jidar unsur bersebelahan bertindih, pelapik tidak. Apabila elemen dengan padding 1em diikuti oleh elemen lain dengan padding 1em, jumlah jarak menegak antara kandungan menjadi 2em. Sebaliknya, apabila jidar 1em digunakan sebaliknya, jarak menegak kekal pada 1em disebabkan oleh pertindihan jidar. Ciri ini amat berguna untuk mengekalkan jarak yang konsisten antara elemen, tanpa mengira konteks.

Penyertaan dalam Rantau Klik dan Penggayaan

Padding dianggap sebagai sebahagian daripada elemen, oleh itu memanjangkan kawasan klik dan dimasukkan ke dalam warna latar belakang dan imej. Margin, bagaimanapun, berada di luar elemen dan tidak menjejaskan aspek ini.

Demonstrasi Visual

Untuk menggambarkan perbezaan, mari kita terokai contoh HTML dan CSS yang mudah:

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

<div class="box padding">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box margin">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

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;
}

Seperti yang anda lihat, elemen dengan padding telah meningkatkan jarak menegak, manakala dengan margin mengekalkan jurang 1em.

Atas ialah kandungan terperinci Margin lwn. Padding dalam CSS: Bagaimanakah Sifat Jarak Ini Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!