3

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

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

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

为什么会发生这种情况？

编辑： JSFIDDLE示例：

4

2 回答 2

4

这是由于边距折叠- 块级元素的第一个子元素的顶部边距（假设它也是块级并参与正常流程）将始终与其父级的顶部边距折叠。

解决此问题的一种方法是将子 div的显示值更改inline-block为.

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

注意：正如AndyG指出的那样，您还可以通过在容器 div 上使用填充或边框以及许多其他方式来防止边距折叠。有关完整列表，请参阅规范。

于 2013-07-31T15:59:50.417 回答
1

您可以执行以下操作：

  • 添加溢出：隐藏；给父母；
  • 添加边框，像这样边框：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-31T16:02:43.747 回答