Почему ложное избыточное разделение между divs?

Question

Эта проблема jsFiddle.

Промежуток (показано белого цвет) между внутренней дивой (показано синим цветом) должны быть таким же, как заполнение самого внешнего Div (в 20px, как показано на зеленый), но это не трудно понять, что это больше.

Это более отчетливо видно в нижней серии, в которой полупрозрачный 20px контур (в светло-оранжевом) был добавлен к пронумерованным внутренним divs с четными номерами.

Почему существует дополнительный интервал между самыми внутренними дивизиями?

---

И теперь, обязательный код:

<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