display:inline-block;でできた隙間(余白)をなくす3つの方法

CSSで要素の横並びを実現する手法の1つとして、「display:inline-block;」を使う方法があります。

例えば、以下のようなHTMLがあったとします。


<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
</ul>

CSS側は以下のように指定すれば、簡単にリストを横並びにすることができます。


li {
  display: inline-block;
}

ですが、単純にdisplay:inline-block;を指定しただけでは、要素と要素の間に微妙な隙間(余白)ができてしまいます。要素を横並びにしつつ、きっちりと隙間なく配置したい場合もあるかと思いますので、display:inline-block;によってできた隙間をなくす方法を紹介いたします。

なお、3つのやり方がありますので、好きな方法で対処してください。

1つ目の方法は、HTML側の改行をなくすという方法です。以下のようにHTMLの改行をなくしてあげれば、display:inline-block;を指定した場合も隙間はできません。


<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>

一番簡単な方法ではありますが、コードが読みにくくなるのが難点です。

2つ目の方法は、親要素のletter-spacingにマイナス値を指定する方法です。以下のように、親要素のletter-spacingにマイナスの値を指定し、子要素ではletter-spacingをnormalに戻します。


ul {
 letter-spacing: -0.3em;
}

li {
 display: inline-block;
 letter-spacing: normal;
}

親要素のfont-sizeを0にすることでも、隙間をなくすことができます。letter-spacingと同様に、子要素ではfont-sizeを通常の値で指定する必要があります。


ul {
 font-size: 0;
}

li {
 display: inline-block;
 font-size: 14px;
}

あとがき

隙間なく要素を横並びにしたい時は、ぜひ参考にしてください。

ちなみに、最近はFlexboxの方が、隙間もできなくて簡単に横並びにできるので、Flexboxをよく使うようになりました。