flex布局下为什么没有margin纵向重叠问题

Question

<div class="container">
    <p>AAA</p>
    <p>BBB</p>
</div>

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1;
}

Answer 1

双越 2020-07-19 09:04:24

因为是 flex 布局，所以这里的 p 和 div 没啥区别。

• 香饽饽0 #1

  flex 的直接子元素是 BFC，BFC 之间不会发生外边距重合。
  老师，可以这么解释吗

• 双越 回复 香饽饽0 #2

  是的。