display inline-blockでできる変な隙間をなくす方法

要素を横並びにする際に個人的にはdisplay:inline-block;で並べる派です。
floatはあまり好みではないので。。。

ただ、display:inline-block;で並べると、意図しない隙間ができます。

例えば2つのinline-block要素を50%で並べ、margin:0 padding:0で指定しても、段落落ちします。

この”隙間”をなくすのは、方法がいくつかあるようですが、一番わかりやすかったのが、letter-spacingでの調整でしたので、ご紹介します。

<div class=“wrap”>

  <!--左に配置したい要素-->
  <div class=“left”>
    <p>横並びにしたい要素、左側</p>
  </div>

  <!--右に配置したい要素-->
  <div class=“right”>
    <p>横並びにしたい要素、右側</p>
  </div>


</div>

上記のような構成だったとします。

ようはleftを左側に、rightを右側に配置したい訳です。

css

.wrap{
letter-spacing: -.50em;
}

.wrap > *{
letter-spacing: normal;
}

これでleftとrightにinline-blockを指定して、leftとrightの合計したwidthをwrap（親要素）の幅以上にしなければ、綺麗に並んでくれます。

letter-spacing: -.40em;と紹介しているブログもありますが、-.40emだと一部のブラウザで段落落ちしていましたので、-.50emにしています。