Question

请查看以下示例：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;
}

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>

保证金顶部不按预期工作

1 个答案: