Rumah > Artikel > hujung hadapan web > Mengapakah margin-top dikira berdasarkan lebar dalam CSS?
Pengiraan Peratusan Margin-Top dalam CSS
Peratusan untuk margin-top dikira relatif kepada lebar blok yang mengandunginya. Ini berbeza daripada jidar menegak dan mendatar, yang dikira berdasarkan ketinggian dan lebar, masing-masing, bekas.
Contoh:
Pertimbangkan kod CSS berikut:
<code class="css">.container { background: lightblue; padding: 10px; height: 200px; width: 500px; } p { display: block; border:1px solid red; margin-top:50%; }</code>
Dalam contoh ini, elemen perenggan kanak-kanak mempunyai margin atas 50%. Peratusan dikira berdasarkan lebar bekas, iaitu 500px. Oleh itu, perenggan diletakkan 250px (50% daripada 500px) dari bahagian atas bekas.
Penalaran untuk Pengiraan Berdasarkan Lebar:
Terdapat dua sebab utama untuk mengasaskan jidar menegak pada lebar blok yang mengandungi:
Contoh dengan Ketinggian Dinamik:
Untuk menunjukkan kesan jidar menegak berasaskan lebar, pertimbangkan kod berikut:
<code class="html"><div class="container"> <p id="element"> Some Cool content</p> </div> <p> MORE TEXT </p></code>
<code class="css">.container { background: lightblue; padding: 10px; height: 100px; width: 500px; } p { display: block; border: 1px solid red; margin-top: 50%; }</code>
Dalam kes ini, elemen perenggan mempunyai ketinggian dinamik berdasarkan kandungannya. Margin atas 50% masih akan dikira berdasarkan lebar bekas, bukan ketinggian perenggan. Ini memastikan perenggan itu kekal pada kedudukan yang betul tanpa mengira kandungannya.
Atas ialah kandungan terperinci Mengapakah margin-top dikira berdasarkan lebar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!