Mengapa Peratusan `margin-top` Saya Melimpahi Bekas?

Mengira Peratusan Atas Margin: Memahami Pendekatan Berasaskan Lebar

Dalam CSS, jidar menegak, termasuk jidar atas, dikira berdasarkan lebar blok yang mengandungi. Pendekatan ini memastikan ketekalan mendatar dan menegak dalam ukuran jidar dan mengelakkan kebergantungan bulat semasa menyusun kandungan.

Ketekalan Mendatar dan Menegak:

Sifat jidar trengkas membolehkan anda menetapkan margin untuk keempat-empat sisi. Jika jidar menegak adalah berdasarkan ketinggian dan bukannya lebar, jidar pada sisi yang berbeza selalunya mempunyai saiz yang berbeza, melanggar tingkah laku yang konsisten.

Mengelakkan Kebergantungan Pekeliling:

Letak CSS keluar kandungan dalam blok menegak. Lebar blok biasanya ditentukan oleh lebar induknya. Walau bagaimanapun, ketinggian blok bergantung pada kandungannya dan boleh berubah secara dinamik. Jika jidar menegak bergantung pada ketinggian, akan terdapat kebergantungan bulat antara ketinggian ibu bapa dan jidar kanak-kanak.

Contoh:

Pertimbangkan kod berikut di mana unsur anak mempunyai margin atas: 50%:

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

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

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

Bertentangan dengan jangkaan bahawa elemen anak akan berada 50% di bawah bahagian atas bekas (100px), ia melimpahi ketinggian bekas. Ini kerana margin peratusan adalah berdasarkan lebar bekas, bukan ketinggiannya. Dalam contoh ini, lebar bekas ialah 500px, menghasilkan margin atas 250px.

Kesimpulannya, pengiraan jidar menegak adalah berdasarkan lebar blok yang mengandungi untuk memastikan konsistensi, mengelakkan kebergantungan bulat dan membolehkan reka letak yang cekap pembinaan.

Atas ialah kandungan terperinci Mengapa Peratusan `margin-top` Saya Melimpahi Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!