Question

当内部元素将上边距放到顶部时，容器将被拉低，因此白色部分显示在页面顶部。我该如何防止该白色部分？

.container {
  background: red;
  height: 500px;
}

.inner {
  margin-top: 100px;
  height: 50px;
  background: yellow;
}

Why there is white section in here ??
<div class="container">
  <div class="inner"></div>
</div>

Answer 1

将外部元素的溢出设置为auto。您在示例中看到了collapsing margins

父母和第一个/最后一个孩子-如果没有边框，填充，内联部分，创建的块格式上下文或清除以分隔从其第一个子块的margin-top开始的块的margin-top；要么无边框，填充，内联内容，高度，最小高度或最大高度将块的边距与块的边距分开最后一个孩子，那么这些利润就崩溃了。 倒塌的边距最终在父母之外。

.container {
  background: red;
  height: 500px;
  overflow: auto;
}

.inner {
  margin-top: 100px;
  height: 50px;
  background: yellow;
}

Why there is white section in here ??
<div class="container">
  <div class="inner"></div>
</div>

Answer 2

由于CSS Box Model，预期您得到的结果。

CSS框模型本质上是一个包装每个HTML元素的框。它包括：页边距，边框，填充和实际内容。

Box模型不同部分的说明：

内容-框的内容，其中显示文本和图像

填充-清除内容周围的区域。填充是透明的

边框-围绕边框和内容的边框

边距-清除边框以外的区域。边距是透明的

请参见此代码段中说明的空白边距和空白处的差异：

.container {
  background: red;
  height: 500px;
}

.inner {
  height: 50px;
  background: yellow;
}

.margin {
  margin-top: 100px;
}

.padding {
  padding-top: 100px;
}

<div class="container">
  <div class="inner margin">
    Inner div has a margin-top
  </div>
</div>
<hr>
<div class="container">
  <div class="inner padding">
    Inner div has a padding-top
  </div>
</div>
<hr>
<div class="container">
  <div class="inner">
    Inner div has no padding/margin
  </div>
</div>

Answer 3

删除div .inner上的 margin-top：100px

您还可以使用margin-top：0; ，或top：0;但这不是必须的...

DEMO

尝试一下：

html,body {margin:0}

.container {
background: red;
height: 500px;
}

.inner {
/*margin-top: 100px;*/
/*margin-top: 0;*/
/*top:0;*/
height: 50px;
background: yellow;
}

// ---------------      

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

顶部边距拉动顶部元素

3 个答案: