html - 为什么底边无边界消失

为什么当我在容器div中添加边框时出现底部边距

HTML：

<div class="container">
    <div class="center_div" >
        <div>cc</div>
        <div>cc</div>
        <div>cc</div>
        <div>cc</div>
    </div>
</div>

CSS：

.container {
    border: 1px black solid;
    background-color: pink;
}


.center_div {
    width: 200px;
    margin: 0 auto 20px;
    background-color: beige;
}

但是当我下降时，底部边距消失了。

.container {
    /* border: 1px black solid; */
    background-color: pink;
}

这是一个FIDDLE

最佳答案

您遇到一个称为边距折叠的问题。如果设置了父母的边框，则在父母与孩子之间不会发生页边折叠。发生这种情况时，父母的保证金将是孩子的保证金与父母的保证金之间的最大值，并且孩子的保证金变为零。如果没有发生，则正常影响孩子的边缘。

这是Demo 1（无边距折叠），显示孩子的边距正常显示，而父母的边距为零（因为我们未设置）。
这是Demo 2（带有边距收缩），显示孩子的边距变为零，而父母的边距是最大边距（这是孩子的边距20px）。注意文本Something continues以查看不同之处。

要变通，您可以像这样Demo 3将border-color设置为transparent。您也可以将overflow设置为visible以外的其他值。这是因为在这种情况下不会发生利润下降。因此，我认为您应该将其设置为auto。

关于html - 为什么底边无边界消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23515196/