Bagaimanakah Padding Sebenarnya Berfungsi untuk Elemen Sebaris dalam CSS?

Padding untuk Elemen Sebaris: Satu Penerokaan

Konsep padding untuk elemen sebaris sering menyebabkan kekeliruan, terutamanya mengenai interaksi mereka dengan margin harta benda. Dalam artikel ini, kami akan menyelidiki kekhususan padding elemen sebaris dan menangani salah tanggapan biasa.

Padding Elemen Sebaris: Salah Tanggapan

Walaupun sesetengah sumber mungkin mendakwa bahawa sebaris elemen mempunyai sifat padding yang lengkap, ini tidak sepenuhnya tepat. Walaupun elemen sebaris sememangnya boleh mempunyai pelapik, ia tidak mempunyai keupayaan untuk menggunakan margin menegak (atas dan bawah). Spesifikasi CSS secara eksplisit menyatakan bahawa sifat ini mempunyai "tiada kesan" pada elemen sebaris yang tidak diganti.

Warisan dan Bukan Kesan Margin

Walau bagaimanapun, "tidak kesan" tidak membayangkan bahawa sifat itu tidak wujud. Ia hanya diabaikan apabila digunakan secara langsung pada elemen sebaris. Walau bagaimanapun, mereka memainkan peranan dalam pewarisan. Seperti yang ditunjukkan dalam contoh berikut, margin boleh diwarisi dan digunakan untuk menyekat elemen apabila digunakan sebagai kanak-kanak:

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>

Misteri Padding Menegak

Satu lagi tanggapan salah umum ialah elemen sebaris tidak boleh menerima pelapik menegak. Walaupun benar bahawa padding-top dan padding-bottom mungkin kelihatan tidak berkesan untuk kandungan teks, ia mempengaruhi elemen sekeliling. Dalam contoh anda, pelapik di sekeliling teks "hello" tidak kelihatan kerana ia menolak teks ke atas dan ke bawah, tetapi teks itu sendiri kekal dalam baris asal.

Atas ialah kandungan terperinci Bagaimanakah Padding Sebenarnya Berfungsi untuk Elemen Sebaris dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!