Why the spurious excess separation between divs? - css

Question

This jsFiddle shows the problem.
The spacing (shown in white) between the innermost divs (shown in blue) should be the same as the outermost div's padding (20px, shown in green), but it's not hard to see that it's greater.
This is can be seen even more clearly in the lower series, in which a translucent 20px outline (in light orange) has been added to the even-numbered innermost divs.
Why is there extra spacing between the innermost divs?
And now, the obligatory code:
<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

Inline elements are sensitive to the white space in your code. One way to deal with this is to simply remove the white space:
</div><div class="innermost">
jsFiddle example
Another option is to use HTML comments:
</div><!--
--><div class="innermost">
jsFiddle example
Yet another way is to set the font size on the parent element to zero:
.row {
display: block;
padding: 0;
white-space: nowrap;
background: #fff;
font-size:0;
}
jsFiddle example