[css]改行した時に生まれる微妙な隙間を消したい

次のような感じで四角形を次々と登場させていくということをやっているのですが、自動的に改行された際、ブロックとブロックの間に微妙な隙間が生まれます。
これを消したい場合はどうするべきでしょうか？
イメージ説明

html
1<div id="square0" class="square" style="background: rgb(244, 179, 194); opacity: 0; animation-delay: 0ms;"></div>
2<div id="square1" class="square" style="background: rgb(212, 172, 173); opacity: 0; animation-delay: 100ms;"></div>
3<div id="square2" class="square" style="background: rgb(225, 169, 171); opacity: 0; animation-delay: 200ms;"></div>
4<div id="square3" class="square" style="background: rgb(246, 191, 188); opacity: 0; animation-delay: 300ms;"></div>
5<div id="square4" class="square" style="background: rgb(245, 177, 170); opacity: 0; animation-delay: 400ms;"></div>
6<div id="square5" class="square" style="background: rgb(228, 171, 155); opacity: 0; animation-delay: 500ms;"></div>
7<div id="square6" class="square" style="background: rgb(240, 145, 153); opacity: 0; animation-delay: 600ms;"></div>
8<div id="square7" class="square" style="background: rgb(242, 160, 161); opacity: 0; animation-delay: 700ms;"></div>
9<div id="square8" class="square" style="background: rgb(240, 144, 141); opacity: 0; animation-delay: 800ms;"></div>
10・
11・
12・
13

CSSアニメーション

css
1
2body{
3    margin:0;
4    padding: 0;
5}
6@keyframes arrival {
7    100%{
8        opacity: 1;   
9        transform: rotateY(360deg);
10    }
11}
12#div{
13    line-height:0;
14}
15.square {
16    display:inline-block;
17    width: 100px;
18    height:100px;
19    animation: forwards;
20    animation-name: arrival;
21    animation-duration: 300ms;
22}

javascript
1num=100
2delay=100
3colors=['F4B3C2', 'D4ACAD', 'E1A9AB', 'F6BFBC', ・・・・]
4div=document.createElement("div")
5div.id="loading1"
6document.body.appendChild(div)
7
8for (i=0;i<num;i++){    
9    square=document.createElement("div")
10    square.id="square"+i
11    square.classList.add("square")
12
13    square.style.background="#"+colors[i]
14    square.style.opacity="0"
15    square.style.animationDelay=i*delay+"ms"
16
17    div.appendChild(square)
18}
19

回答1件

ベストアンサー

インラインブロックはvertical-align:bottomでボックスの縦位置基準を行の下部に揃えることで隙間が解消します.

CSS
1.square {
2    display:inline-block;
3    width: 100px;
4    height:100px;
5    animation: forwards;
6    animation-name: arrival;
7    animation-duration: 300ms;
8    vertical-align: bottom;
9}