为什么向页眉添加上边距会将整个页眉向下推？

标题元素中的 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 添加 Overflow:auto 属性。当边距超出其可用空间时，这将导致父 div 滚动，从而防止标题 div 向下移动。

div#header {
  overflow: auto;
  ...
}

更多详细信息，请参阅以下链接：

以上是为什么向页眉添加上边距会将整个页眉向下推？的详细内容。更多信息请关注PHP中文网其他相关文章！