Mengapa Elemen Induk Tidak Sentiasa Mengandungi Margin Elemen Kanak-Kanak Secara Konsisten?

Pengandungan Margin Tidak Konsisten Elemen Induk

Apabila elemen dengan jidar diletakkan di dalam elemen lain, elemen induk tidak sentiasa membalut atau mengandungi margin itu. Ketidakkonsistenan ini kelihatan berlawanan dengan intuitif, terutamanya jika dibandingkan dengan gelagat sifat lain seperti jidar, kedudukan, paparan dan limpahan.

Jing Bertindih dan Runtuh

Secara intuitif, seseorang mungkin andaikan bahawa keruntuhan margin, seperti yang diterangkan dalam spesifikasi CSS, mempengaruhi tingkah laku ini. Walau bagaimanapun, walaupun tiada margin bertindih dan gelagat yang konsisten merentas penyemak imbas, punca ketidakkonsistenan ini terletak di tempat lain.

Logik Di Sebalik Pengekalan Margin

Spesifikasi CSS sebenarnya mentakrifkan tingkah laku ini, walaupun dengan beberapa percanggahan. Spesifikasi tersebut membincangkan kedua-dua "margin percuma" (margin yang melangkaui elemen induk) dan "margin runtuh" ​​(margin bersebelahan yang bertindih), tanpa membezakan dengan jelas syarat di mana setiap satu terpakai.

Demo dan Kesimpulan

Demo berikut menggambarkan tingkah laku tidak konsisten ini:

<code class="html"><div class="block">
  <h2 id="Is-the-margin-contained-block">Is the margin contained (block)?</h2>
</div>
<div class="inline-block">
  <h2 id="Is-the-margin-contained-inline-block">Is the margin contained (inline-block)?</h2>
</div>
<div class="position-absolute">
  <h2 id="Is-the-margin-contained-position-absolute">Is the margin contained (position-absolute)?</h2>
</div>
<div class="overflow-auto">
  <h2 id="Is-the-margin-contained-overflow-auto">Is the margin contained (overflow-auto)?</h2>
</div>
<div class="border">
  <h2 id="Is-the-margin-contained-border">Is the margin contained (border)?</h2>
</div></code>

Ketidakkonsistenan jelas apabila membandingkan elemen "blok" (dengan kelakuan margin lalainya) dengan semua yang lain elemen. Nampaknya segala-galanya kecuali gelagat lalai div biasa menganggap bahawa margin terkandung oleh induk.

Tingkah laku berbelit-belit ini berpunca daripada kekaburan dalam spesifikasi CSS berkenaan keruntuhan margin dan margin bebas. Malangnya, dokumentasi tidak memberikan penjelasan yang jelas tentang cara konsep ini berinteraksi dengan sifat elemen yang berbeza seperti sempadan, kedudukan dan limpahan.

Atas ialah kandungan terperinci Mengapa Elemen Induk Tidak Sentiasa Mengandungi Margin Elemen Kanak-Kanak Secara Konsisten?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!