WEBのこと

画像とコード付きですぐ分かる!inline-block要素の隙間を無くす方法

display:inlineblock 隙間を無くす

display:inline-block;で要素を並べるた時に「あれ?なんか隙間が・・・」なんて経験あるよね!
この記事を見てるってことは、どんなに要素を検証しても何故か消えない余白に八方ふさがりになっているはず。

書き直さないとinline-blockの隙間は消えないのかなと思っている方、大丈夫、

\消えますよ/

早速、パッと見てパッと修正していこう!

display:inline-blockで隙間を無くす方法

僕はTabを5つ並びで表示させようとしたときに、隙間問題にぶち当たった。

画像で確認するとこんな形になって、レイアウトが崩れていると思う。

inline-block 隙間有り

display:inline-blockにして各要素にwidth:20%を指定してborderで要素囲んでいるから、box-sizing:border-boxもしているにも関わらず隙間ができていた。

なんでだろうと思って検索をしていくとどうやら、「テキストの改行」が原因だったようだ。
なので、inline-blockを使った要素の親要素にfont-size:0;を記述することでこの問題は解決された。

親要素にfont-size:0;を指定すると綺麗に横に並ぶ!

inline-block 隙間無し

 

良く使われる形で説明していこう。

<ul>~<ul>のリストでメニューなど作ると思う。

これに対して下記のようにCSSを記述していく。

このように、親要素にfont-size:0;を指定した分、子要素には必ずfont-size: ;を指定してあげる。
この方法で僕は修正をした。

ただ、font-sizeにパーセントを指定する場合のことを考えるとletter-spacingを使った方法のほうが良いみたい。

こちらも実際試したが、どちらも同じくらい簡単なので後者のCSSを記述することをオススメする。

まとめ

display:inline-block;の罠を知らないと誰しもが一度はハマると思う。僕が大事だと思ったのは

わからなかったらすぐに調べること

この方法は自力じゃ辿り着けなかったことだから、時間を無駄にしたなと思った…わからないことはすぐ調べた方が良い。
HTMLやCSSに関しては沢山情報が溢れていることですしね!