CSSのdisplay:inline-blockとtable-cellの違い

4059476052_91be170aa7_b

サイトのナビゲージョンなどで要素を横並びにしたい時。

CSSのfloatをよく使用しますよね。

但し、floatを使うと後続の要素に影響を与えてしまうので、できれば使いたくないっていうのが本音。

最近のWEBサイトのCSSを調べて気づいたこと。

横並びにdisplay要素のtable-cellを使っているサイトが多い。

ではdisplay要素のtable-cellってどんな表示になるの?って方に今日は要素を横並びできるdisplay要素のinline-blockとtable-cellの違いについてご紹介します。

 

ブロック要素を横並びにするCSS

display要素のinline-blockとtable-cellはどちらともブロック要素を横並びにしてくれる便利なCSSです。

まず表示上の違いですが、display:blockだとliの要素間に隙間が発生します。

DEMOはこちら

ですがhtmlのli要素の改行を全て削除すれば、DEMOの様に隙間はなくなります。

これで表示上の違いは両者とも無くなります。
table-cellはIE8以降しか対応していない為、それを考慮するとinline-blockの方が使い勝手がいいかなと思います。

ただしレスポンシブの様な構造の場合はtable-cellのwidthの幅計算が簡単な様です。
こちらのibnetさんの記事が大変参考になります。

ibnetさん|CSS「display: table」と「display: table-cell」で出来ること

これらを考慮すると、スマホサイトのみの場合はtable-cellが良さそうです。
それ以外はinline-blockで対応していこうかな。

Sponsored Link

コメントを残す