[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で隙間をなくす

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

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


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

CSSで隙間をなくす

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

letter-spacingを使う

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

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

font-sizeを使う

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

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

以上。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;
}
タイトルとURLをコピーしました