display: inline-blockで要素を横に並べると隙間ができる問題の対処法！
display: inline-blockを使いdivやul・liタグなどを横に並べる方法はよく使われます。その際に要素の間に「隙間」が発生することがあります。この隙間を消す方法と逆に広げる方法を解説します！
display: inline-blockで要素を横に並べると隙間ができる問題
display: inline-blockは、divタグや箇条書きのタグ（ul・liタグ）などを横並びにする際によく利用されます。
しかしinline-blockで横並びにしてよく初心者が直面する問題として、横並びにした要素の間に謎の隙間ができる問題です。
例えば下記の例を見てみましょう。
この例の「テキスト」と「テキスト」の間に上下左右で隙間が空いているのがわかると思います。更にその隙間を埋めようとmarginとpaddingを0にしていますが、その隙間を埋めることが出来ていません。
今回の記事ではこのinline-blockで横並びにした際にできる隙間を消す方法や逆に広げるにはどうしたらいいのかについて解説していきます。
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プロパティについては詳細は下記よりご確認頂けます。
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で隙間調整をするという方法が統一性がありおすすめです。
