[CSS]inline-blockで横に並べたら隙間ができた時の対処法

グローバルナビゲーションなどで、リストを横並びにしたいとき、floatを使わずにdisplay:inline-blockで並べたいとする。
いざコーディングすると、隙間ができてしまうことがあります。

HTML

<div class="box">aaaaaaa</div>
<div class="box">aaaaaaa</div>
<div class="box">aaaaaaa</div>

CSS

.box{
  border:1px black solid;
  width:100px;
  height:100px;
  padding:10px;
  background:#eaeaea;
  display:inline-block;
}

この隙間は、改行部分が空白として認識してしまっているからなんですね。

どうしてもinline-blockを使わなければならないならば、htmlを修正すれば直るパターンがいくつかあります。

パターン1 改行をなくす

<div class="box">aaaaaaa</div><div class="box">aaaaaaa</div><div class="box">aaaaaaa</div>

パターン2 タグ間の改行をなくす

<div class="box">aaaaaaa</div
><div class="box">aaaaaaa</div
><div class="box">aaaaaaa</div>

パターン3 コメントを使う

<div class="box">aaaaaaa</div><!--
--><div class="box">aaaaaaa</div><!--
--><div class="box">aaaaaaa</div>

パターン4 親要素の文字間を一旦詰める

親要素の文字間をletter-spacingで-0.4em詰めてから、子要素の文字間を元に戻す。

#parent{ letter-spacing:-0.4em; }
.box{ letter-spacing:normal; ... }