inline-blockで横並びにしたときにできてしまう隙間をなくすテクニック

こんにちは！

タイで買ったバナナチップスを食べながらブログ更新している社員Aです👩

社員旅行記についても書きたいのですが、4日間とも充実していて内容量が多いので、複数記事に分けて更新予定です^^

今後タイに行かれる方の参考になるような記事が書けたらと思っています！

さて、今回はCSSの「inline-blockで横並びにしたときにできてしまう隙間をなくすテクニック」をご紹介したいと思います。

意外とよく使う「inline-block」だけど欠点も…

便利なCSSの「inline-block」は、コンテンツを横並びにしたいときなどに使ったりするのですが、意外な欠点があります。

たとえば、下記のようなHTMLとCSSでボックスを横並びにすると、マージンを指定していないのにbox間に隙間ができてしまいます。

<ul>
	<li>box1</li>
	<li>box2</li>
	<li>box3</li>
	<li>box4</li>
</ul>

ul li{
	display:inline-block;
	background:#eee;
	width:15%;
	text-align:center;
	padding:20px 0;
}

なぜ「inline-block」を横並びにすると隙間ができてしまうのか？

inline-blockを指定したときに、liに対しての後ろにある改行を半角スペースとして認識してしまうため、若干の隙間が出来てしまうのが原因です。

この隙間をなくすためには、いくつかのテクニックがあります。

「inline-block」で横並びにしたときに隙間を消す4つのテクニック

ここからは、「inline-block」でコンテンツを横並びにしたときにできてしまう隙間を消すための4つのテクニックをご紹介します。

1.改行しない

コード的には見栄えが悪くなってしまいますが、<li>間の改行をなくしてしまいます。

これにより隙間は完全に消えますが、htmlの見栄えを無視しているものなのできれいなソースコードを書きたい方には次に紹介する②のやり方をおすすめします。

<ul><li>box1</li><li>box2</li><li>box3</li><li>box4</li></ul>

2.inline-blockを囲む大枠に「font-size:0;」を指定する

今回で言えば、ulが大枠になります。この大枠に対して、「font-size:0;」を指定することで隙間が消えます。

このときの注意点は下記です。

ul{
	font-size:0;
}
ul li{
	display:inline-block;
	background:#eee;
	width:15%;
	text-align:center;
	padding:20px 0;
	font-size:initial;
}

まとめ

上記で紹介した以外にも、letter-spaceで対応する方法もありますが、端末や文字サイズによって調整が必要なため、コードの見栄えもよくなる②をおすすめします。

inline-blockは結構使用頻度が多く、float:leftに比べてもコンテンツ自体を中央揃えにできたりとメリットがあるので覚えておくと便利です！