0

我正在研究这个 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>
4

1 回答 1

2

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

您的 .9746589% 填充适用于这两种情况，但是由于您将其放在上面，.content因此它实际上并没有受到它article和p里面那个之间的边距塌陷的影响。但是，如果您要删除它以及边框，那么所有元素的边距将塌陷，绿色背景将完全消失。换句话说，就像您的边框如何阻止articleand之间的边距折叠一样p，您的 padding 也阻止了 and 及其内容之间的边距.content折叠article。

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

于 2013-08-24T06:14:59.177 回答