为什么 div 之间虚假的过度分离？

Question

这 jsFiddle 显示了问题。

最里面的 div 之间的间距（显示为白色）（显示为蓝色）应该与最外面的 div 相同填充（20px，以绿色显示），但不难看出它更大。

这在下面的系列中可以看得更清楚，其中偶数最里面的 div 部分添加了半透明的 20px 轮廓（浅橙色）。

为什么最里面的 div 之间有额外的间距？

现在，必填代码：

<div class="outermost">
  <div class="row">
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
  </div>
</div>

<div class="outermost">
  <div class="row">
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
    <div class="innermost"></div>
  </div>
</div>

html {
    font-family: consolas, monaco, courier, monospace;
    font-size: 16px;
}

body {
    padding: 5px;
    max-width: 530px;
}

div {
    margin: 0;
    border: 0;
}

div:not(.row) {
    display: inline-block;
    vertical-align: top;
    overflow: auto;
    padding: 20px;
    cursor: default;
}

.outermost {
    background: #c3cd84;
}

.row {
    display: block;
    padding: 0;
    white-space: nowrap;
    background: #fff;
}

div.row > :not(:first-child) {
    margin-left: 20px;
}

.innermost {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #90b2c0;
}

.outermost:last-child {
    margin-top: 20px;
}

.outermost:last-child .innermost:nth-child(even) {
    outline: 20px solid rgba(243, 204, 152, 0.6);
}

Answer 1

内联元素对代码中的白色 space 敏感。解决这个问题的一种方法是简单地删除白色 space:

</div><div class="innermost">

jsFiddle example

另一种选择是使用 HTML 评论：

</div><!--
        --><div class="innermost">

jsFiddle example

另一种方法是将父元素的字体大小设置为零：

.row {
    display: block;
    padding: 0;
    white-space: nowrap;
    background: #fff;
    font-size:0;
}

jsFiddle example

为什么 div 之间虚假的过度分离？

Why the spurious excess separation between divs?

css

layout