请查看以下示例:https://jsfiddle.net/9wbm179c/
margin-top:50px;
正在 body 和.outter
之间造成这种难看的差距。只需再次阅读代码和此消息:在 body 和.outter
之间......是不是应该在 .inner 和{{1 }}?
.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;
}
答案 0 :(得分:0)
你所看到的被称为“保证金崩溃”。 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>