display:inline-blockでできる隙間を消す方法

■floatの代わりに使う機会が増えてきたdisplay:inline-block

・display:inline-blockは
1.block要素のようにwidthやheight、paddingやmarginの設定ができる。
2.inline要素のように横並びにできる

■display:inline-blockできれいに横並びにならないとき

例えば
display:inline-block;
height:400px;
width:50%;
border:1px solid #000;
box-sizing:border-box;

の要素を2つ並べてもこのままでは段落ちしてしまいます。

■横並びにするには
1.htmlを修正する

上記のようになっていると段落ちしてしまいます。
これを、

このようにくっつけます。
display:inline-blockにすると改行部分の情報が空白になるようです。

2.cssを修正する

親要素のulにletter-spacingを-で設定します。

※このままではliの表示が崩れるので、必ずletter-spacing:normalを追加する事が大切です。

■参考display:inline-block;でできた隙間をなくす4つの方法 | webledge