更新

Question

更频繁的是，我没遇到过这个问题。通常我使用填充而不是边距或一些快速解决方案来解决我的问题，但我也知道这不是正确的解决方法。

如果不深入写我的问题，我喜欢创造一个小提琴，以便更好地理解。所以这是我的fiddle。

.container-node {
    margin: 10px;
    background-color: #0f0;
}

.content-node {
    margin: 20px;
    background-color: #f00;
    padding: 5px;
    color:#fff;
}

.border {
    border:1px solid #00f;   
}

我试图指出的问题是，如果我有两个div，一个在另一个内部，而内部div有一些余量，如果容器有边界，则取不同的边距值，如果容器不同则没有边框。

我感谢您提供的任何帮助或文档。感谢

Answer 1

http://www.w3.org/TR/CSS2/box.html 仔细阅读8.3.1折叠边距

当且仅当：
时，两个边距相邻

没有行框，没有间隙，没有填充，没有边框将它们分开

我知道这个问题的最佳解决方案是clearfix。它没有给出填充或溢出，但与之类似。

Fiddle

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

Answer 2

正如已经指出的那样，利润率下降是一个“问题”。关于这个问题的一个非常好的读物可以在这里找到：

http://reference.sitepoint.com/css/collapsingmargins

您可以添加1px的填充并将边距减小1，如下所示：

.container-node {
    margin: 9px;
    background-color: #0f0;
    padding: 1px;
}

适用于您的问题： http://jsfiddle.net/n65bX/1/

Answer 3

.content-node的边距不能正常工作，它没有可以推送的元素。使用border属性可以定义元素的轮廓（基于边框，边距可以从那里推出）。

要轻松解决此问题，您可以在.container-node上添加填充，而不是.content-node上的边距：

.container-node {
    /*margin: 10px;*/
    padding: 20px;
    background-color: #0f0;
}

此外，您正在创建带边距的黄色边框。我建议你在正确的元素上使用填充：

.root-node {
    border: 1px solid #bababb;
    background: #ff0;
    margin: 10px 0;
    padding: 10px;
}

适当的意思是相关元素。您为.root-node元素提供了黄色背景，因此您还应该在该元素上定义该元素的大小。以这种方式使用它会更加逻辑：）

如果要创建内嵌间距使用填充，如果您希望在之外使用边距。

jsFiddle

这可能也很有用：When to use margin vs padding in CSS

更新

所以你可能会问自己：为什么元素（.content-node）不是基于父（.container-node）元素被推开的？

为什么会发生这种情况相当简单。边距仍然推动元素（.content-node）离开，只是它基于错误的元素（它是从.root-node推出的）。这就是为什么你的黄色边框比带边框的更大。

那么为什么它会被推到根元素？

进一步调试;我们只在.content-node：

的左侧和右侧设置边距

 margin: 0 55px;

<强> jsFiddle

似乎只有最高利润才起作用。确实似乎边际为collapsing。

我找到了关于此问题的主题：Why does this CSS margin-top style not work?

所以我建议使用填充，这样边距就不会相互冲突（填充物永远不会在相同的“流程”中相互作用）。

Answer 4

我会尽力解释这一点。

在包含“container-node”的元素中，该容器没有“区域”给予边距。

通过在之前/之后添加示例文本，您将看到保证金有效。同样，如果您给“容器节点”一个边框甚至填充，那么您将为该元素提供一些内容以供“内容节点”定位。

当容器没有边框时，CSS边距问题

4 个答案:

jsFiddle

更新