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

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

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

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

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

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

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

<ul>
  <li>幅50％</li>
  <li>幅50％</li>
</ul>

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

<ul>
  <li>幅50％</li><li>幅50％</li>
</ul>

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

2.cssを修正する

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

ul {
  letter-spacing: -0.5em;
}

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

li{
  /* ↓追加します */
  letter-spacing: normal; 
}

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