[CSS]display:inline-blockでできる隙間をなくす方法

display:inline-block 隙間
最近はul,liを横並びにーとか、商品一覧は横並びにーという時はdisplay:inline-blockを使ってます。

理由はclearやclearfixが要らないから。（あまり理由になってないけど）

という訳で

display:inline-blockでできること

display:inline-blockを使うと、最初でも書いたようにul,liをfloatなしで横並びにできます。

See the Pen display:inline-block by mitsuki sagayama (@sagayama) on CodePen.

display:inline-blockを使って横並びにすると隙間ができてしまうんです・・・。
これはhtmlの文字コードが原因でできる隙間です。

解決方法で現実的な方法を紹介します。

htmlで隙間のなくす方法はliの後の改行をなくしてあげればいいだけです。

See the Pen display:inline-block2 by mitsuki sagayama (@sagayama) on CodePen.

きっと一番簡単な方法だと思います。

CSSで隙間のなくす方法を2つ紹介します。まずは。

親要素でletter-spacingしてあげて子要素で元に戻す方法です。

親要素でfont-size:0にしてあげて子要素で元に戻す方法です。

以上。display:inline-blockでできる隙間をなくす方法でした。

個人的にliの改行をなくす方法は簡単なんですけど気持ち悪いので使いません。
letter-spacingはなぜ-0.4emなのかがイマイチはっきりしない・・・（文字と文字が重なりだす値なんだと思います。）
よってfont-sizeを使うことが多いです。

ちなみにdisplay:inline-blockのIE6～7の対策は↓

li {
    display: inline-block;
    /* IE6～7 */
    *display: inline;
    *zoom: 1;
}