CSS保证金不根据母公司

我有两个div，一个“容器”和一个“内容”。如果内容在容器内，则适合容器。CSS保证金不根据母公司

#container { 
    display:block; 
    width:300px; 
    margin:auto; 
    background:green; 
} 
#content { 
    display:block; 
    margin:20px; /* HERE IS THE ERROR */ 
    background:yellow; 
}

顶部和底部边距不在父项内，但左侧和右侧均为。

为什么会发生这种情况？

编辑：JSFIDDLE example:

来源

2013-07-31 Giovanne Afonso

余量塌陷。使用容器中的填充来定位内容。或者确保容器没有设置上边距。 – ProfileTwist

这是由于margin collapsing - 块级元素的第一个孩子的顶部边缘（假设它也阻止一级和normal flow参与）将始终与顶缘塌陷其父母。

解决此问题的一种方法是将子div的change the display value设置为inline-block。

#content { 
    background: yellow; 
    display: inline-block; 
    margin: 20px; 
}

^{注：由于AndyG指出，还可以阻止利润率使用padding or borders on the container div许多其他的方式中倒塌。请参阅spec以获取完整列表。}

来源

2013-07-31 15:59:50 Adrift

其中一种方法是将“padding：1px;”添加到容器（父级）元素。 –

这实际上是最好的方式，我忘记了父母和孩子之间的填充或边界也可以防止崩溃。谢谢 – Adrift

如果您愿意，可以将其添加到您的答案中;） –

你可以做下一个：

添加溢出：隐藏;给父母;
添加边框，像这样的边框：1px实心透明;到父

添加填充到父

#container { 
    background: green; 

    border: 1px solid transparent; 

    display: block; 
    margin: auto; 
    width: 300px; 
} 
#content { 
    background: yellow; 
    display: block; 
    margin: 19px; /* because 1px for parent border */ 
}

例http://jsfiddle.net/3cXys/

来源

2013-07-31 16:02:43 Belyash

CSS保证金不根据母公司

回答

相关问题