DIV 元素上的 css-prop 大纲未显示或不正确

Question

我在寻找另一个错误时想到了这个..

奇怪的事情正在发生..

.blok {
  outline: 1px solid red;
}
.blok > label {
  padding-top: 7px;
  margin-bottom: 0;
  text-align: right;
  width: 41.66666667%;
  float: left;
  outline: 1px solid green;
}
.blok > div {
  outline: 1px solid yellow;
  height: 50px;
}

<div class="blok">
  <label>
    Deep in the night
  </label>
  <div>
    I was looking for some fun
  </div>
</div>

关于 .blok > div : outline

在 Chrome 和 Safari 中我根本看不到轮廓.. 在 Firefox 中，我覆盖了 parent 的大纲..

我正在寻找发生这种情况的原因.. 我知道我可以在 div > div

上使用 display: inline-block;

我知道这看起来像一个非常愚蠢的问题，因为我知道在这种情况下解决问题的方法是罕见的..但对我来说重要的是知道什么和谁错了..

提前致谢!

Answer 1

发生这种情况是因为 margins are collapsing .

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

看Updated jsFiddle现在工作正常。

.blok > div {
  outline: 1px solid yellow;
  height: 50px;
  overflow: hidden; /* this line added */
  float: left; /* this line added */
}

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.