div內的浮動div有奇怪的間距

Question

我有一個較大的父div內的div。 所有這些孩子divs有50％寬度。這個想法是有2列。 此外，這些孩子divs有一個動態的高度。

我在這裏有一個例子。 https://jsfiddle.net/y2jpr052/

這是用inline-block完成的。正如你所看到的，divs之間有一個奇怪的間距。那究竟是什麼？我該如何擺脫它。 謝謝！

更新： 我看到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的父DIV至0應解決這個問題。

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

小提琴這裏： 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/