HTML section高度与设置了固定高度的子容器不匹配问题咨询

问题原因及解决方案 #

核心原因1：外边距塌陷（Margin Collapse） #

你给子元素#referencesContainer设置了margin-top: 100px，默认情况下父元素section未触发BFC（块级格式化上下文）时，子元素的顶部外边距会穿透父元素，溢出到父元素外部，不会被计算到父元素的高度里，最终表现为父元素高度远低于子元素实际占用高度。

核心原因2：box-sizing取值问题 #

#referencesContainer同时设置了height: 300px和padding: 30px，如果没有显式设置box-sizing: border-box，浏览器默认使用content-box计算尺寸，子元素的实际渲染高度为300px + 30px*2 = 360px，如果你预期父元素高度和你设置的300px对齐，就会出现偏差。

其他可能原因：浏览器默认样式 #

部分浏览器的用户代理样式表会给section标签设置默认的内外边距，如果你没有做样式重置，也会导致高度计算出现偏差。

对应解决方案 #

• 解决外边距塌陷：给父元素#references添加任意一种属性触发BFC即可：
  • 无副作用方案：display: flow-root
  • 其他可选方案：overflow: hidden、padding-top: 1px、border-top: 1px solid transparent
• 解决高度计算偏差：给元素添加box-sizing: border-box，可以全局设置也可以单独给#referencesContainer设置：

  #referencesContainer {
    box-sizing: border-box;
  }
  

• 清除默认样式：给#references添加margin: 0; padding: 0，清除浏览器默认样式干扰。

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