3

我遇到了与<div>元素边距相关的奇怪行为。我已经向 jsFiddle 添加了一个非常简单的测试用例来向您展示我的意思。

有趣的是，边距在使用边框时使用正确。这是默认行为吗？这与折叠边距有关吗？是否有可能在没有任何黑客攻击的情况下以某种方式强制利润率？

到目前为止我想到的最丑陋的解决方案：

.cssContainer {
    margin:10px;
    padding:0.1px;

    background-color:#FF0000;
}

但我不知道这是否适用于每个浏览器。

4

4 回答 4

4

这又是一个overflow:auto救命的案例！

jsFiddle 示例

只需添加overflow:auto到您的容器 div 中，瞧，和谐就恢复了。

.cssContainer {
    margin:10px;
    padding:0px;
    overflow:auto;
    background-color:#FF0000;
}

从规范来看，这样做的原因是因为一个新的块格式化上下文是通过应用overflowother来建立的visible，强制 margin.cssContainer不与其流入的子项一起折叠.cssElement。

于 2012-08-07T21:17:59.030 回答
2

从这个网站

阻止边距折叠发生的最简单方法是为每个元素添加填充或边框。如果我们希望每个元素有 10px 的边距，我们可以简单地使用 9px 的边距和 1px 的填充来获得我们想要的结果

于 2012-08-07T21:14:10.997 回答
1

这是由于CSS 盒子模型。具有红色背景的元素的高度不会增加以适应其子元素的顶部和底部填充，但由于在第二个示例中指定了边框并包含填充，因此将显示填充。

该overflow: auto;属性有效，因为填充溢出其父元素。为了说明这一点，在 Google Chrome 开发人员工具中，找到并单击底部填充不会显示的绿色元素的 HTML 行。Chrome 将突出显示页面上的元素。注意填充是如何包含在突出显示的元素中的。填充实际上溢出了父元素。父元素不会显示它，因为在填充中或之后没有内容（没有“边界”）。

于 2012-08-07T21:32:48.133 回答
0

从关于盒子模型的css规范：

相邻的垂直边距折叠，除了：

...

水平边距永远不会塌陷。

两个边距相邻当且仅当：

...

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
    top margin of a box and top margin of its first in-flow child
    bottom margin of box and top margin of its next in-flow following sibling
    bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

...

请注意，上述规则意味着：

...

建立新块格式化上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与它们的流入子代一起折叠。

不幸的是，text-overflow: auto这有点冒险，因为规范说：

汽车

'auto' 值的行为取决于用户代理，但应该为溢出的框提供滚动机制

但是，我查看过的所有浏览器似乎都以以下方式实现它：

该框扩展为以下之间的较小数量：

  1. 在其容纳盒允许的范围内
  2. 尽可能多地显示内容而不进行剪辑

然后，如果必须进行剪辑，则添加滚动条。

于 2012-08-07T22:57:17.290 回答