父容器内带margin-top的flex子元素出现顶部空白，是否为浏览器Bug？

这不是浏览器Bug，是CSS的外边距溢出规则导致的现象：

当块级父容器没有设置border、padding、overflow: hidden（或其他能创建块级格式化上下文BFC的属性）时，其第一个子元素的margin-top会溢出到父容器外部，导致父容器顶部出现空白（显示父容器的父级背景，这里是body的白色）。

代码示例 #

<body style='margin: 0;'>
  <div style='background: #400; height: 500px;'>
    <!-- 添加&nbsp;可使顶部显示父容器的深红色背景 -->
    <div style='background: #080;  margin-top: 1rem; display: flex; '>test2</div>
  </div>
</body>

问题现象 #

顶部显示空白区域，而非父容器的深红色背景；绿色子元素位于空白区域下方，其下方才是父容器的深红色背景。

为什么你发现的操作能解决问题？ #

• 移除display: flex：子元素变回普通块级元素，父容器的固定高度（height: 500px）会将子元素的margin-top包含在自身内容区域内，父容器的红色背景会覆盖这个margin区域，顶部不再显示空白。
• 在子元素前添加 ：父容器内出现了内联内容，相当于在子元素和父容器顶部之间添加了“阻隔”，子元素的margin-top不再溢出到父容器外。

更通用的解决方案 #

除了你发现的两种方法，还可以通过以下方式彻底解决：

• 给父容器添加padding-top: 1px（或透明边框border-top: 1px solid transparent），阻断margin溢出路径
• 给父容器设置overflow: hidden，创建BFC来包含子元素的margin
• 把父容器设置为flex容器（display: flex），flex容器天然会包含子元素的margin

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