Mengapa Peratusan Teratas Margin Dikira Berdasarkan Lebar dalam CSS?

Bagaimanakah Peratusan Margin-Top Dikira dalam CSS?

Apabila menggunakan peratusan atas margin pada elemen anak dalam bekas induk, adalah penting untuk memahami cara peratusan dikira. Peratusan margin adalah relatif kepada lebar blok yang mengandungi, bukan ketinggian.

Spesifikasi W3C

Mengikut spesifikasi W3C, peratusan atas margin dikira dengan berkenaan dengan lebar, bukan ketinggian, blok yang mengandungi. Ini memastikan ketekalan antara jidar mendatar dan menegak serta mengelakkan kebergantungan bulat semasa mengira ketinggian elemen.

Sebab Pengiraan Margin Berasaskan Lebar

Terdapat dua sebab utama untuk mengasaskan jidar menegak pada lebar blok yang mengandungi:

• Ketekalan Mendatar dan Menegak: Peratusan margin-atas dan margin-bawah hendaklah berkelakuan secara konsisten berkenaan dengan margin-kiri dan margin -peratusan kanan, yang berdasarkan lebar.
• Mengelakkan Kebergantungan Pekeliling: Ketinggian blok biasanya ditentukan oleh kandungannya, yang seterusnya bergantung pada jidar atas dan bawah. Mengasaskan jidar menegak pada lebar memecahkan kebergantungan bulat ini dan membolehkan reka letak halaman logik.

Contoh

Mari kita pertimbangkan senario dengan bekas induk dengan ketinggian sebanyak 100px dan lebar 500px, dan elemen anak dengan margin atas: 50%. Peratusan atas jidar dikira relatif kepada lebar bekas, iaitu 50% daripada 500px. Oleh itu, margin atas ialah 250px, iaitu separuh lebar.

Contoh Kod

CSS berikut menunjukkan kesan menetapkan margin atas kepada 50% dengan bekas berasaskan lebar:

<code class="css">.container {
  background: lightblue;
  padding: 10px;
  height: 100px;
  width: 500px;
}

p {
  display: block;
  border: 1px solid red;
  margin-top: 50%;
}</code>

Dalam contoh ini, elemen anak akan mempunyai margin atas 250px, yang dikira sebagai 50% daripada lebar 500px bekas itu.

Atas ialah kandungan terperinci Mengapa Peratusan Teratas Margin Dikira Berdasarkan Lebar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!