Question

为什么当我向容器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

Answer 1

现在定义您的 .container overflow:hidden;

就像这样

.container{
overflow:hidden;
}

<强> Demo

Answer 2

我刚修改了以下这样的css。

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

现在工作正常。

Answer 3

您遇到了一个名为保证金折叠的问题。如果设置了父级边框，则父级和子级之间不会发生边距折叠。当它发生时，父母的边际将是孩子的边缘与父母的边缘之间的最大值和孩子的边缘变为零。如果没有发生，孩子的保证金正常生效。

以下是Demo 1（没有保证金折叠），表明孩子的保证金通常，而父母的保证金为零（因为我们不＆＃ 39;设置它）。这里是Demo 2（边缘折叠）显示孩子的保证金变为零而父母的保证金是最大保证金（这是孩子＆＃39; s保证金20px）。注意文字Something continues以查看差异。

要解决此问题，您可以将border-color设置为transparent，例如Demo 3。您还可以将overflow设置为，而不是 visible。这是因为在这种情况下不会发生保证金崩溃。所以我认为你应该把它设置为auto。

为什么保证金底部消失而没有边界

3 个答案: