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:

• Ketekalan Mendatar dan Menegak: Ini memastikan bahawa jidar pada keempat-empat sisi blok adalah sama saiz, walaupun apabila menggunakan sifat jidar trengkas.
• Mengelakkan Kebergantungan Pekeliling: Jidar menegak berasaskan ketinggian akan mewujudkan pergantungan bulat antara ketinggian blok dan ketinggian kandungannya, menjadikan pengiraan reka letak menjadi mustahil.

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!