保證金上限無法正常工作

Question

請看以下示例： https : //jsfiddle.net/9wbm179c/

頁margin-top:50px; 正在使body和.outter之間出現這種難看的間隙。 只需再次閱讀代碼和以下消息： body和.outter之間...難道不是應該在.inner和.outter之間形成 .outter嗎？

 html, body { padding: 0; margin: 0; } body { background: #777; } .outter { background: #099; text-align: center; } .inner { background: #ff0; width: 400px; height: 150px; margin: 0 auto; margin-top: 50px; } 

 <div class="outter"> <div class="inner"> </div> </div> 

Answer 1

您所看到的稱為“邊距崩潰”。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

父級和第一個/最后一個子級 -如果沒有邊框，內邊距，內聯內容，創建的block_formatting_context或間隙以將塊的邊距頂部與其第一個子塊的邊距頂部分開，或者沒有邊框，內邊距，內嵌內容，高度，最小高度或最大高度，以將塊的邊距底部與最后一個子元素的邊距底部分開，然后這些邊距折疊。 折疊的邊距最終在父級之外。

您可以通過多種方式解決它。 一種方法是使用overflow:hidden; 在父元素.outter 。 你也可以使用padding-top: 50px上.outter而不是margin-top上.inner

 html,body { padding:0; margin:0; } body { background:#777; } .outter { background:#099; text-align:center; overflow: hidden; } .inner { background:#ff0; width:400px; height:150px; margin:0 auto; margin-top:50px; } 

 <div class="outter"> <div class="inner"> </div> </div>