css - 为什么填充不能折叠？

Question

如上图所示，当我们在两个 div 之间应用边距时，将放置更大的边距，例如。如果第一个 div 包含 20px 边距，第二个 div 包含 10px 边距，那么它们之间的边距将仅为 20px。如果我将 padding-bottom: 20px 应用到第一个 div 并将 padding-top: 10px 应用到第二个 div，它应该导致 20px 但它们之间的结果是 30px。

那么，为什么填充值不能折叠？

---

我有以下 html 标记:

<main>
  <article id="one"></article>
  <article id="two"></article>
</main>

所以，现在我正在对文章应用填充值，但应该将其折叠起来。那么，文章元素(padding)是如何被称为内部元素的呢？

Answer 1

由于填充在元素内部，我认为这没有意义。让我们想象一下引擎开始折叠填充:您将如何在 2 个 div 之间分配生成的 20px？