如何在无文本的div#contact内实现h1标签向下偏移？

这个问题其实是CSS里经典的**外边距折叠（Margin Collapse）**导致的——当父容器（你的div#contact）和子元素（H1）的顶部外边距直接相邻，且父容器没有触发BFC（块级格式化上下文）时，子元素的margin-top会“穿透”到父容器上，看起来就像H1的上边距没起作用。而当你在DIV里加了文本后，文本相当于在父容器顶部和H1之间加了一个“隔断”，打破了外边距相邻的条件，所以H1的margin-top就正常生效了。

下面给你几个靠谱的解决方案，按需选择：

方案1：给父容器触发BFC（最推荐） #

触发BFC的方式有很多，这里推荐两种无副作用的：

• 方法A：使用display: flow-root（现代浏览器都支持，专门为解决外边距折叠设计）
  修改你的父DIV样式：

  div#contact {
    float: left;
    margin: 0;
    width: 100%;
    background-color: #eeeeee;
    font-size: 20px;
    color: #252a30;
    text-align: center;
    display: flow-root; /* 新增这行 */
  }
  

• 方法B：使用overflow: hidden（兼容性极好，适合老项目）

  div#contact {
    /* 其他样式不变 */
    overflow: hidden; /* 新增这行 */
  }
  

方案2：用父容器的Padding-Top代替H1的Margin-Top #

既然子元素的外边距会穿透，那直接给父容器加顶部内边距，同样能实现下移效果，还不会触发折叠：

div#contact {
  /* 其他样式不变 */
  padding-top: 20px; /* 替换H1的margin-top，值按需调整 */
}
h1 {
  margin-top: 0; /* 去掉H1的margin-top */
}

方案3：用伪元素隔断外边距 #

给父容器的顶部添加一个空的伪元素，让它隔开父容器顶部和H1的外边距：

div#contact::before {
  content: "";
  display: table; /* 关键：设置为块级或表格级元素 */
}

你可以根据自己的项目需求选其中一种，测试后就能看到H1在空DIV里正常下移啦~

内容的提问来源于stack exchange，提问作者Benjamin Sommer