html - 内容高度中的 CSS 边框规范很重要

Question

我正在研究这个 CSS，我将一篇文章包装在一个 div 中。我已经给出了两者的百分比宽度，以及 div 的填充。在我为文章添加边框之前，我的填充似乎“未应用”。您可以通过评论应用于文章的边框来查看差异。我的文章高度缩小了。为什么会这样？

<style>
body{
    margin:100px;
}
.content{
width:100%;   
padding:.9746589%;
background:green;
   }
  .content>article{
width:100%;
background:yellow;  
border:1px solid red;
 }

</style>
        <div class="content" role="main">
            <article>

                <p>This is my text!</p>
            </article>
        </div>

Answer 1

p 元素中的默认边距为 collapsing使用您的 article 元素。当您向 article 添加边框时，它可以防止折叠的发生并使其包含 p 元素及其默认边距。

您的 .9746589% 填充在这两种情况下均适用，但由于您将其放在 .content 上，因此它实际上不受其 article 和里面的 p 。但是，如果您要删除 that 以及边框，则边距会在所有元素上折叠并且绿色背景会完全消失。换句话说，就像您的边框如何阻止 article 和 p 之间的边距折叠一样，您的填充也阻止了 .content 和之间的边距折叠文章及其内容。

最后，边距只会垂直折叠，因此设置宽度永远不会产生影响。