[英]Margin-top doesn't work as intended
请看以下示例: 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>
您所看到的称为“边距崩溃”。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.