Html 容器没有边框时CSS边距问题

我经常遇到这个问题。一般来说，我用填充代替边距或一些快速解决方案来解决我的问题，但我也知道这不是正确的解决方法

我不想深入写我的文章，我喜欢编造一把小提琴来加深理解。这是我的建议

我想指出的问题是，如果我有两个div，一个在另一个内部，并且内部div被赋予了一些边距，那么如果容器有边框，那么边距值的取值不同，如果容器没有边框，那么取值也不同

我感谢您在这方面提供的任何帮助或文档。谢谢

仔细阅读8.3.1折叠页边距

两个边距相邻当且仅当：

• 无线框、无间隙、无填充和无边框将它们分隔开

我知道解决这个问题的最好办法是。它不提供填充或溢出，但与之类似

---

正如已经指出的，利润率下降是一个“问题”。有关此问题的详细信息，请访问：

您只需添加1px的填充，并将边距减少1，如下所示：

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

适用于您的问题：

---

我将尽力解释这一点

在包含“container node”的元素中，没有该容器的“区域”可提供余量

---

通过在前后添加示例文本，您将看到页边空白起作用。类似地，如果给“容器节点”一个边框，甚至是填充，那么您将为该元素提供“内容节点”要定位的对象。

内容节点的边距不能正常工作，它没有可从中推送的元素。使用

border

属性可以定义元素的轮廓（基于边框，边距可以从那里推进）

要轻松解决此问题，可以在

.container节点

中添加一个填充，而不是

.content节点

上的边距：

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

 margin: 0 55px;

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

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

我指的是相关元素。您为

.root节点
元素提供了黄色背景，因此还应该在该元素上定义该元素的大小。
这样使用它更符合逻辑：）

如果要创建内联间距，请使用填充，如果要使其超出范围，请使用边距


这也可能有用：


更新
因此，您可能会问自己：为什么元素（
.content节点
）没有基于父（
.container节点
）元素被推开

这很简单，为什么会发生。边距仍然将元素（
.content节点
）推开，只是它基于错误的元素（它是从
.root节点
）推开的）。这就是为什么你的黄色边框比有边框的大

那么为什么它被推到根元素上呢

进一步调试；让我们只在
.content节点的左侧和右侧设置边距
：

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

 margin: 0 55px;


似乎只有最高利润率不起作用。而且看起来差距确实很大

我找到了关于这件事的话题：


所以我建议使用填充，这样边距就不会相互冲突（填充不能在同一个“流”中相互作用）。
看起来像是在寻找折叠margins@Danield绝对是的。为什么要使用display:table？下面的链接都是关于clearfix的。简单地说，就是把代码做得小一点。很好的分享。如果我不设置/希望将margin值设置为container节点类，那么我很兴奋地问您，这是否正确。可能我会使用负的边距。我担心它是否能跨浏览器工作。请无边际地再看一遍小提琴。谢谢分享。我在我的一些解决方案中使用了填充，它们在很大程度上发挥了作用。我已经在上面提到过了。啊，对不起，我没有读到^^，但我认为这是填充的正确用法。需要从元素中推送边距，但它不这样做。使用padding时，它与任何其他元素都不相关，只是将padding添加到内部元素。在我看来，你想在内部增加间距，而不是在外部增加间距。是的，你在某种程度上是对的。但我遇到了一个用例，我需要在一个框外添加空间，这意味着我应该使用边距。写正确的css是我想做的事情，尽可能长时间地记住这些限制。我感觉到你了。我坚持我的答案，因为它不需要任何“修复”或“破解”，它只使用了正确的填充和边距。尽管如此，我还是会试图找到一些与此相关的文档：）@RupamDatta正如失败所说，利润率确实在崩溃。检查我的更新：）这是一个很好的观点。你能举例说明吗？