Bagaimanakah peratusan atas margin dikira dalam CSS?

Pengiraan Peratusan Atas Margin dalam CSS

Mengira peratusan atas margin dalam CSS memerlukan pemahaman titik rujukannya. Tidak seperti andaian intuitif, ia tidak dikira daripada ketinggian induk tetapi lebih kepada lebarnya.

Menyelidiki Spek W3C

Spesifikasi W3C dengan jelas menyatakan, "Peratusan dikira berkenaan dengan lebar blok yang mengandungi kotak yang dihasilkan." Ini berlaku untuk kedua-dua margin-atas dan margin-bawah.

Memastikan Ketekalan dan Mengelakkan Kebergantungan Pekeliling

Margin berasaskan peratusan pada semua pihak (margin-atas, - kanan, -bawah, -kiri) memberikan ketekalan dalam susun atur. Menggunakan peratusan untuk jidar mendatar dan menegak mengelakkan perbezaan dalam saiz jidar.

Selain itu, jidar menegak berdasarkan lebar bekas mengelakkan pergantungan bulat dalam reka letak halaman. Ketinggian blok bergantung pada kandungannya, manakala ketinggian kandungan memerlukan pengiraan yang merangkumi margin atas dan bawah. Dengan melabuhkan jidar menegak pada lebar bekas, kebergantungan ini dipecahkan, membolehkan reka letak yang berkesan.

Contoh Kod

.bekas {<br> latar belakang: biru muda ;<br> pelapik: 10px;<br> tinggi: 100px;<br> lebar: 500px;<br>}</p>
<p>p {<br> paparan: blok;<br> jidar: 1px merah pepejal; <br> margin-top: 50%;<br>}<br>

Setelah pelaksanaan, margin-top diukur berbanding dengan lebar 500px bekas, menghasilkan margin 250px .

Atas ialah kandungan terperinci Bagaimanakah peratusan atas margin dikira dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!