html - Margin-top 没有按预期工作

Question

请看下面的例子:https://jsfiddle.net/9wbm179c/

margin-top:50px; 在 body 和 .outter 之间造成了这个丑陋的差距。再次阅读代码和这条消息:在 body 和 .outter 之间......它不是应该在 .inner 之间制造差距吗和 .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

您所看到的称为“ margin 崩溃”。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Parent and first/last child - If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

您可以通过多种方式解决它。一种方法是在父元素 .outter 上使用 overflow:hidden;。您还可以在 .outter 上使用 padding-top: 50px 而不是在 .inner 上使用 margin-top p>

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>