Adakah Elemen Sebaris Benar-Benar Kekurangan `margin-top` dan `margin-bottom`?

Peladam untuk Elemen Sebaris

Mengenai sifat elemen sebaris, persoalan biasa timbul tentang pelapik dan jidar. Menurut beberapa sumber, elemen sebaris mempunyai sifat padding yang lengkap tetapi tidak mempunyai sifat margin atas dan margin bawah, hanya mempunyai margin-kiri dan margin-kanan.

Tempat Cari Penyata Khusus Margin Rasmi

Pertama, tuntutan ini bukan pernyataan muktamad yang terdapat dalam piawaian W3. Walau bagaimanapun, model kotak menyatakan bahawa margin atas dan margin bawah "tidak mempunyai kesan pada elemen sebaris yang tidak diganti."

Memahami "Tiada Kesan" untuk Sifat Margin

"Tiada kesan" dalam konteks ini tidak membayangkan ketiadaan hartanah. Sebaliknya, ini bermakna sifat ini tidak menjejaskan kedudukan elemen sebaris. Walau bagaimanapun, ia wujud untuk tujuan pewarisan.

Contoh: Pewarisan Harta Margin

Pertimbangkan kod berikut:

p { border:1px solid red }
i { vertical-align:top; }
span { margin-top: 20px; margin-bottom: 20px;  }
b { display:inline-block; }
.two { margin:inherit;  }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

Dalam contoh ini, margin pada baris kedua diwarisi daripada rentang induk disebabkan oleh .two peraturan. Tingkah laku mewarisi nilai jidar daripada mengandungi unsur ini menunjukkan bahawa sifat jidar atas dan jidar bawah memang wujud, walaupun sifat tersebut tidak menjejaskan kedudukan unsur sebaris seperti teks secara langsung.

Sifat Padding untuk Sebaris Elemen

Walaupun elemen sebaris mempunyai sifat padding yang lengkap, padding-top dan padding-bottom mungkin tidak menjejaskan persekitaran teks seperti yang diharapkan. Ini kerana elemen sebaris tidak mempunyai ketinggian yang ditentukan secara lalai. Akibatnya, tetapan padding-top atau padding-bottom mungkin tidak mengubah saiz atau kedudukan elemen secara visual berbanding teks sekelilingnya.

Atas ialah kandungan terperinci Adakah Elemen Sebaris Benar-Benar Kekurangan `margin-top` dan `margin-bottom`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!