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

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

display:inline-block;でできた隙間(余白)をなくす3つの方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

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

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

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

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

CSS
li {
display: inline-block;
}

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

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

スポンサードリンク

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

HTMLの改行をなくす

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

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

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

親要素のletter-spacingにマイナス値を指定する

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

ul {
letter-spacing: -0.3em;
}
li {
display: inline-block;
letter-spacing: normal;
}
親要素のfont-sizeを0にする

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

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

あとがき

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。