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

内联元素对代码中的空白区域很敏感。解决这个问题的一种方法是简单地删除空格：

</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之间的虚假过度分离？

1 个答案: