Плавающие divs внутри div имеют странное расстояние

Question

У меня есть divs внутри более крупного родительского div. Все эти дочерние div имеют ширину 50%. Идея состоит в том, чтобы иметь 2 столбца. Также эти дочерние div имеют динамическую высоту.

У меня есть пример здесь. https://jsfiddle.net/y2jpr052/

Это делается с помощью встроенного блока. И, как вы можете видеть, между диванами есть странное расстояние. Что это такое? И как я могу избавиться от него. Спасибо!

UPDATE: Я вижу, что divs все выровнены сверху на строку, а значит, странное расстояние. Вот от чего я хочу избавиться.

Другое обновление: в принципе нет вертикального интервала. Или интервал в зависимости от поля/заполнения дочернего div. Каждый цветной блок здесь представляет собой плавающий div с динамической высотой.

#index.html 

<div id="modules"> 
    <div id="m1" class="module">m1</div> 
    <div id="m2" class="module">m2</div> 
    <div id="m3" class="module">m3</div> 
    <div id="m4" class="module">m4</div> 
    <div id="m5" class="module">m5</div> 
    <div id="m6" class="module">m6</div> 
    <div id="m7" class="module">m7</div> 
    <div id="m8" class="module">m8</div> 
    <div id="m9" class="module">m9</div> 
    <div id="m10" class="module">m10</div> 
</div> 

#index.css 

#modules { 
    width: 100%; 
    border: 1px solid red; 
    overflow: auto; 
} 

.module { 
    display: inline-block; 
    width: 45%; 
    height: 50px; 
    border: 1px solid black; 
} 

#m1 { 
    height: 70px; 
} 

#m2 { 
    height: 40px; 
} 

#m3 { 
    height: 100px; 
} 

#m4 { 
    height: 100px; 
} 

#m5 { 
    height: 85px; 
} 

#m6 { 
    height: 70px; 
} 

#m7 { 
    height: 55px; 
} 

#m8 { 
    height: 77px; 
} 

#m9 { 
    height: 100px; 
} 

Answer 1

Установите размер шрифта для родительского DIV из DIVs 0, должно решить эту проблему.

#modules { font-size:0px; } 
.module { font-size:12px;} /*Or any size that you like*/ 

Fiddle здесь: https://jsfiddle.net/Math3w_C/y2jpr052/1/

Answer 2

То, что вы хотите здесь две колонки.

Так что вам просто нужно добавить этот CSS:

-webkit-column-count: 2; /* Chrome, Safari, Opera */ 
-moz-column-count: 2; /* Firefox */ 
column-count: 2; 

-webkit-column-gap: 0px; /* Chrome, Safari, Opera */ 
-moz-column-gap: 0px; /* Firefox */ 
column-gap: 0px; 

Посмотреть этот jsfiddle: https://jsfiddle.net/y2jpr052/10/