Question

我遇到了与<div>元素的边距相关的奇怪行为。 I've added a very simple test case to jsFiddle to show you what I mean

有趣的是，使用边框时正确使用了边距。这是默认行为吗？这是否与折叠边距有关？是否有可能以某种方式强迫边缘没有任何黑客攻击？

到目前为止，我想到的最难看的解决方案是：

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

    background-color:#FF0000;
}

但我不知道这是否适用于所有浏览器。

Answer 1

这是另一个将overflow:auto添加到救援中的案例！

<强> jsFiddle example

只需将overflow:auto添加到您的容器div中即可恢复和谐。

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

从specs开始，其工作原因是因为应用overflow以外的visible来建立新的块格式化上下文，从而强制.cssContainer的边距1}}不要让其流入的孩子.cssElement崩溃。

Answer 2

来自this site

阻止边际崩溃的最简单方法是添加每个元素的填充或边框。如果我们想要每个10px的利润我们可以简单地使用9px的边距和1px的填充来获得结果我们想要

Answer 3

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

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

Answer 4

来自css spec regarding box models：

相邻的垂直边距会崩溃，除了：

...

水平边距永不崩溃。

当且仅当：
时，两个边距相邻
...
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
...

注意以上规则意味着：

...

建立新块格式化上下文的元素的边距（例如   作为花车和'overflow'除了'可见'以外的元素）不会   与流动的孩子一起崩溃。

不幸的是，text-overflow: auto风险稍高because the spec says：

自动

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

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

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

与其包含框一样多
尽可能多地显示内容而不剪辑

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

删除<div>元素上方和下方的边距？</div>

4 个答案:

自动