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

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 透明边框并在必要时进行补偿。我试过使用 overflow: auto;或溢出:隐藏。但两者都不等同于有边界。溢出:自动；如果内部元素大于父元素，或者如果您以某种方式使用负边距而添加边框则不会，有时会创建滚动条，溢出:隐藏；完全阻止滚动，而添加边框则不会。

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

Answer 1

你问题的具体答案是collapsing margins并且是 W3C's BOX MODEL 的一部分规范:

---

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

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

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

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

---

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

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

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

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

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