为什么添加或删除边框会改变边距的工作方式？

Question

如果我有一个容器，其中的元素内部有一个边距，那么该元素的边距不会将其向下推到该容器内，而是向下推容器本身。仅此一项，虽然很烦人，但可能正是 w3c 决定它的工作方式。但奇怪的是，如果我向容器添加边框，该元素现在将在容器内向下推，然后容器将与上面的元素齐平（我想要的）。到目前为止，我使用的大多数容器都有边框，这样我就可以知道一切是如何排列的，但是现在我决定开始添加背景颜色并删除边距以使一切看起来更好，我正在运行大量没有应用任何容器背景颜色的容器之间的间隙问题。

如果我不清楚，我创建了一个 jsfiddle 来演示该问题，正如您通过查看 html / js 所看到的那样，单击按钮只会切换边框的存在，而不会切换其他任何内容。然而，容器之间的所有边距都会根据边界是否存在而变化。

http://jsfiddle.net/Tysonzero/p5fgjmrn/

HTML：

<div class="first-div">
</div>
<div class="second-div">
    <div class="inner-div">Test</div>
</div>
<button onclick="toggle()">Toggle Border</button>

CSS：

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.first-div
{
    background-color: red;
    min-height: 50px;
}
.second-div
{
    background-color: blue;
    min-height: 50px;
}
.inner-div
{
    margin: 10px;
    text-align: center;
}

JS：

toggle = function() {
    if (document.getElementsByClassName('second-div')[0].style.border) {
        document.getElementsByClassName('second-div')[0].style.border = "";
    }
    else {
        document.getElementsByClassName('second-div')[0].style.border = "1px solid";
    }
};

我希望它始终像 IMO 那样以边框的方式工作，这更有意义，而对于我的项目来说，这正是我所需要的。我真的希望我不必做一些骇人听闻的事情，例如为所有内容添加 1px 透明边框并在必要时对其进行补偿。我试过使用溢出：自动；或溢出：隐藏。但两者都不等于有边界。溢出：自动；如果内部元素大于父元素，或者如果您以某种方式使用负边距而添加边框则不会，有时会创建滚动条，溢出：隐藏；完全防止滚动，而添加边框则不会。

有谁知道我可以如何强制浏览器将所有内容都视为有边框（或至少使此类问题不会发生）并且任何人都可以解释这种行为吗？这似乎是无意的，但我可能是错的。

Answer 1

您的问题的具体答案是collapsing margins，是W3C's BOX MODEL 规范的一部分：

---

某些框之间的垂直边距可能会折叠：

• 正常流崩溃中块框的两个或多个相邻垂直边距。生成的边距宽度是相邻边距宽度的最大值。在负边距的情况下，从正相邻边距的最大值​​中减去负相邻边距的绝对值的最大值。如果没有正边距，则从零中减去负相邻边距的绝对最大值。笔记。相邻框可能由与兄弟或祖先不相关的元素生成。
• 浮动框和任何其他框之间的垂直边距不会折叠（甚至在浮动框与其流入的子级之间也不折叠）。
• 建立新块格式上下文的元素的垂直边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与其流入的子元素一起折叠。
• 绝对定位框的边距不会塌陷（即使是流入的子代也不会塌陷）。
• 内联块元素的边距不会折叠（即使是它们的流入子元素也不折叠）。
• 如果框的顶部和底部边距相邻，则边距可能会通过它折叠。在这种情况下，元素的位置取决于它与边距被折叠的其他元素的关系。
  • 如果元素的边距与其父元素的上边距折叠在一起，则框的上边框边缘被定义为与父元素的相同。
  • 否则，要么元素的父级不参与边距折叠，要么只涉及父级的底部边距。元素上边框边缘的位置与元素具有非零下边框时的位置相同。

应用了间隙的元素永远不会将其上边距与其父块的下边距折叠起来。

请注意，被折叠的元素的位置不会影响被折叠的其他元素的位置；仅在布置这些元素的后代时才需要顶部边框边缘位置。 根元素框的边距不会折叠。

---

因此，当您添加边框时，您所做的正是规范所说的，因此您没有边距。

有很多方法、修复和技巧可以解决这个问题，但对我来说，最直接和最简单的方法就是将overflow:auto; 属性应用于要清除边距的 div。

因此，在您的 CSS 中，您只需要像这样更改它：

.second-div
{
    background-color: blue;
    min-height: 50px;
    overflow:auto;
}

我forked your fiddle 有更多的边框，所以你可以注意到效果，看看效果如何