为什么子元素的上边距会压低其父元素的 div？

Margin-Top 将父级 Div 向下推：理解并解决问题

许多开发人员在将上边距应用于页面上第一个可见元素：它导致父 div 被下推。为了深入研究此行为的原因并提供解决方案，让我们分析一下提供的代码片段：

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
}

div#header h1 {
  text-align: center;
  width: 375px;
  height: 50px;
  margin: 50px auto;
  font-size: 220%;
  background: url('../../images/name_logo.png') no-repeat;
}

此代码定义了一个标题 div，其中包含一个包含 50px 边距的嵌套 h1 元素。通常，我们希望这个边距能够增加 h1 和 header div 上边缘之间的空间。然而，它反而导致整个标题 div 下推 50px。

要理解为什么会出现这种情况，我们需要考虑“块格式化上下文”。当应用于页面上的第一个可见元素时，上边距会重置块格式上下文，导致父 div 被下拉。

此问题的解决方案是将 Overflow: auto 应用于父 div 。这允许父div自动调整其高度以适应其子元素，包括带有上边距的h1：

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
  overflow: auto;
}

通过添加overflow: auto，我们允许标题div垂直调整大小，从而防止它当将上边距添加到 h1 元素时，防止被向下推。

以上是为什么子元素的上边距会压低其父元素的 div？的详细内容。更多信息请关注PHP中文网其他相关文章！