通常，在CSS中，当父级和最后一个子级具有边距时，这些边距会折叠以创建单个边距。例如

article {

  margin-bottom: 20px

}



main {

  background: pink;

  margin-bottom: 20px;

}



footer {

  background: skyblue;

}


<div id="container">

  <main>

    <article>

      Item 1

    </article>

    <article>

      Item 2

    </article>

  </main>

  <footer>Footer</footer>

</div>

如您所见，即使20px在article和main标记上都指定了的边距，您也只能20px在最后 一篇文章 和 页脚 之间得到一个边距。

但是，当使用 flexbox 时，我们40px在上一个 文章 和 页脚 之间 留有 边距- 20p从文章到main
的全边距为x，20px从main到 footer的 边距为全x 。

#container {

  display: flex;

  flex-direction: column;

}



article {

  margin-bottom: 20px

}



main {

  background: pink;

  margin-bottom: 20px;

}



footer {

  background: skyblue;

}


<div id="container">

  <main>

    <article>

      Item 1

    </article>

    <article>

      Item 2

    </article>

  </main>

  <footer>Footer</footer>

</div>

有没有一种方法可以使 flexbox的页 边距行为与非flexbox的 页 边距相同？