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之间的边距折叠的影响。在里面。但是，如果要移除以及边框，则边距将在所有元素上折叠，绿色背景将完全消失。换句话说，就像边框阻止article和p之间的边距折叠一样，您的填充也会阻止.content和article及其内容之间的边距折叠。 / p>

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

Answer 2

确保您有任何其他重写的CSS代码。而不是

padding:.9746589%;

使用

padding:.9746589% !important;

内容高度的CSS边界规范问题

2 个答案: