Question

我有两个div，一个“容器”和一个“content”。如果内容在容器内，则适合容器。

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

顶部和底部边距不在父级内部，但左侧和右侧是。

为什么会这样？

编辑： JSFIDDLE example:

Answer 1

这是由于margin collapsing - 块级元素的第一个孩子的顶部边缘（假设它也是块级并且参与normal flow）将始终以其父级的上边距折叠。

解决这个问题的另一种方法是将子级别change the display value改为inline-block。

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

^{注意：正如AndyG指出的那样，您还可以通过许多其他方式使用padding or borders on the container div来防止边距折叠。有关完整列表，请参阅spec。}

Answer 2

你可以做下一个：

添加溢出：隐藏;到了父母;
添加边框，如此边框：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/

CSS保证金不符合父母

2 个答案: