Mengapakah gaya atas margin CSS ini tidak berfungsi?

Question

Saya cuba menambah nilai margin pada div di dalam div Semuanya berfungsi dengan baik kecuali nilai tertinggi, yang nampaknya diabaikan. Tapi kenapa?

Jangkaan saya:

Apa yang saya dapat:

Kod:

#outer {
  lebar: 500px;
  ketinggian: 200px;
  latar belakang: #FFCCCC;
  jidar: 50px auto 0 auto;
  paparan: blok;
}

#dalaman {
  latar belakang: #FFCC33;
  jidar: 50px 50px 50px 50px;
  padding: 10px;
  paparan: blok;
}

<div id="outer">
  <div id="inner">
    Hai dunia!
  </div>
</div>

W3Schools tidak menjelaskan mengapa ini berlaku dengan margin.

Answer 1

Cuba dalamdiv上使用display: inline-block;. Seperti ini:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Answer 2

Apa yang anda lihat sebenarnya ialah #inner 元素的上边距 折叠到#outer元素的上边缘，仅保留#outermargin adalah utuh (walaupun tidak ditunjukkan dalam imej). Tepi atas kedua-dua kotak adalah siram antara satu sama lain kerana jidarnya adalah sama.

Berikut adalah perkara yang berkaitan daripada spesifikasi W3C:

Anda boleh melakukan mana-mana perkara berikut untuk mengelakkan margin daripada runtuh:

Pilihan di atas menghalang margin daripada runtuh kerana:

Biping kiri dan kanan berkelakuan seperti yang anda jangkakan kerana: