display: inline-blockで要素を横に並べると隙間ができる問題の対処法!

display: inline-blockを使いdivやul・liタグなどを横に並べる方法はよく使われます。その際に要素の間に「隙間」が発生することがあります。この隙間を消す方法と逆に広げる方法を解説します!

コンテンツ [表示]

  1. 1display: inline-blockで要素を横に並べると隙間ができる問題
  2. 2display: inline-blockで要素を横に並べると隙間ができる問題の対処法
  3. 2.1親要素にfont-size: 0を指定する
  4. 2.2letter-spacingで調整する
  5. 3display: inline-blockで要素を横に並べて出来る隙間を広げる方法
  6. 3.1親要素のfont-sizeで大きい値を指定する
  7. 3.2marginで隙間をあけてもいい

display: inline-blockで要素を横に並べると隙間ができる問題

display: inline-blockは、divタグや箇条書きのタグ(ulliタグ)などを横並びにする際によく利用されます。

しかしinline-blockで横並びにしてよく初心者が直面する問題として、横並びにした要素の間に謎の隙間ができる問題です。

例えば下記の例を見てみましょう。

この例の「テキスト」と「テキスト」の間に上下左右で隙間が空いているのがわかると思います。更にその隙間を埋めようとmarginpaddingを0にしていますが、その隙間を埋めることが出来ていません。

今回の記事ではこのinline-blockで横並びにした際にできる隙間を消す方法や逆に広げるにはどうしたらいいのかについて解説していきます。

Photo byFree-Photos

display: inline-blockで要素を横に並べると隙間ができる問題の対処法

まずこのinline-blockで横並びにした際の隙間の原因ですが、inline-blockにした要素のテキストで改行が入っているために起こります。そのためこの改行をCSSで調整すれば隙間を埋めることができます。

いくつかやり方がありますので、ぜひ好きな方法を採用しましょう。

親要素にfont-size: 0を指定する

inline-blockを指定した親要素でfont-size: 0を指定し、更にinline-blockを指定する要素でfont-size: 任意の値を指定することで、隙間を回避することが出来ます。

letter-spacingで調整する

また文字の間隔を調整するプロパティのletter-spacingを使って、親要素にマイナスの値を指定し、inline-blockの要素で元に戻す方法でも隙間をなくすことが出来ます。
(上下には残りますので、上下の隙間を削除したい場合はfont-size: 0を指定しましょう)

CSSのletter-spacingプロパティについては詳細は下記よりご確認頂けます。

あわせて読みたい
letter-spacing
CSSのletter-spacingプロパティは文字同士の間隔(字間の隙間)を調整するプロパティです。文字の間隔を広げたり、逆に狭める事が出来ます。構文や使い方をサンプルコード付きで解説します。

display: inline-blockで要素を横に並べて出来る隙間を広げる方法

今度は逆にinline-blockで出来た隙間を広げる方法を考えてみます。

親要素のfont-sizeで大きい値を指定する

さきほどは隙間を消すためにfont-size: 0としましたが、逆にfont-sizeを大きくしてみます。

するとさきほどよりも大きな隙間があきました。このように親要素のfont-sizeを大きくすることで隙間を開けることが出来ます。

marginで隙間をあけてもいい

display: inline-blockを指定していますので、marginで隙間調整が可能です。ただmarginを0にしても隙間は空いてしまうため、後々混乱する可能性も出てきそうです。

隙間を開ける場合は、親要素へのfont-size: 0で改行の隙間を消しておいて、marginで隙間調整をするという方法が統一性がありおすすめです。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次