Mengapakah peratusan margin dan padding CSS relatif kepada lebar, bukan ketinggian?

Mengapa Peratusan Margin/Padding dalam CSS Diikat Dengan Lebar

Model Kotak CSS mentakrifkan bahawa peratusan margin dan padding dikira berbanding lebar daripada blok yang mengandungi. Tingkah laku pelik ini telah menimbulkan persoalan tentang rasionalnya.

Petikan Ditekankan daripada Spesifikasi Model Kotak CSS

"Peratusan [margin] dikira berkenaan dengan lebar blok yang mengandungi kotak yang dihasilkan Perhatikan bahawa ini adalah benar untuk 'margin-top' dan 'margin-bottom' sebagai baik."

Dakwaan tentang Penaakulan

Kesan ke atas Ketinggian Ibu Bapa sebagai Faktor Penghad

Dugaan yang tidak berasas mencadangkan bahawa keputusan itu mungkin berpunca daripada kebimbangan mengenai pengiraan ketinggian. Ketinggian elemen biasanya ditakrifkan oleh ketinggian anak-anak mereka. Jika padding-top digunakan sebagai peratusan berbanding ketinggian induk, ia mempengaruhi ketinggian induk. Walau bagaimanapun, memandangkan ketinggian kanak-kanak bergantung pada ketinggian ibu bapa dan sebaliknya, ini mewujudkan gelung pergantungan atau pengiraan ketinggian yang tidak tepat.

Pertimbangan Senario Bersarang

Ini kebimbangan amat relevan dalam kes di mana ketinggian ibu bapa bergantung pada ketinggian kanak-kanak dan ketinggian kanak-kanak bergantung pada ketinggian ibu bapa (cth., ibu bapa mengimbangi === ibu bapa). Menyelesaikan kes sedemikian menjadi mencabar kerana gelung pergantungan atau pengiraan tidak terhingga.

Contoh

Pertimbangkan coretan kod berikut:

<div>

Dalam ini contoh, margin atas div dalam dikira sebagai 10% daripada lebar induk div (200px), menghasilkan margin 20px.

Atas ialah kandungan terperinci Mengapakah peratusan margin dan padding CSS relatif kepada lebar, bukan ketinggian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!