Apakah proses pengiraan peratusan atas margin?

Question

Saya tahu ini sepatutnya mudah, tetapi bolehkah sesiapa memberitahu saya mengapa elemen anak dalam kod berikut melangkaui sempadan bekas induk apabila margin-top: 50% digunakan? Bagaimanakah peratusan atas margin dikira?

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

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

<div class="container">
<p> Some Cool content</p>
 
</div>

Bukankah elemen anak sepatutnya 50% daripada 200px (ketinggian ditetapkan oleh elemen induk) dari bahagian atas elemen induk, iaitu, 100px dari atas?

Answer 1

Judar berasaskan peratusan dikira berdasarkan lebar bekas induk, tidak kira di sebelah mana jidar berada.

Jadi apa yang anda lihat ialah margin atas adalah bersamaan dengan 50% daripada lebar.

Answer 2

Dari Spesifikasi W3C:

Terdapat dua sebab yang baik untuk mendasarkan jidar menegak pada lebar blok yang mengandungi:

Konsistensi mendatar dan menegak

Sudah tentu, terdapat sifat trengkas yang membolehkan anda menentukan margin pada empat sisi blok:

margin: 10%;

Ini berkembang kepada:

margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;

Sekarang, jika anda menulis mana-mana perkara di atas, anda mungkin menjangkakan jidar adalah saiz yang sama pada keempat-empat sisi blok, bukan? Walau bagaimanapun, jika jidar-kiri dan jidar-kanan adalah berdasarkan lebar bekas, dan margin-atas dan margin-bawah berdasarkan ketinggiannya, ia biasanya berbeza!

Elakkan kebergantungan bulat

CSS membentangkan kandungan dalam blok bertindan menegak pada halaman, jadi lebar blok biasanya ditentukan sepenuhnya oleh lebar elemen induknya. Dengan kata lain, anda boleh mengira lebar blok tanpa perlu risau tentang kandungan di dalam blok.

Ketinggian blok adalah perkara lain. Biasanya, ketinggian ditentukan oleh gabungan ketinggian kandungannya. Menukar ketinggian kandungan akan mengubah ketinggian blok. Adakah anda melihat masalahnya?

Untuk mendapatkan ketinggian kandungan, anda perlu mengetahui margin atas dan bawah yang digunakan padanya. Jika margin tersebut bergantung pada ketinggian blok induk, maka anda menghadapi masalah kerana anda tidak boleh mengira satu tanpa mengetahui yang lain!

Jing menegak berdasarkan lebar bekas memecahkan kebergantungan bulat ini dan membolehkan susun atur halaman.

Contoh:

Ini adalah contoh. Dan kod:

HTML

<div class="container">
  <p id="element">一些很酷的内容</p>

</div>

<p>
  更多文本
</p>

CSS

.container {
  background: lightblue;
  padding: 10px;
  height: 100px;
  width: 500px;
}

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

JS

window.onload = function(evt) {

  var element = document.getElementById("element"),
    style = element.currentStyle || window.getComputedStyle(element);

  element.textContent = "margin-top是：" + style.marginTop;
};