【CSS】 「inline-block」要素を並べると「すき間」ができる

こんにちは、さち です。

CSS で display: inline-block; を指定した「要素」を並べると、謎のすき間（空白）ができてしまうことに気づきました。

今回は、その「すき間」を削除する方法について書いていきます。

「すき間」ができる原因

サンプルコード

HTML

<div class="wrapper">
  <section class="first" >1</section>
  <section class="second">2</section>
  <section class="third" >3</section>
</div>

CSS

分かりやすくするため、見た目に大きく関与する CSS 以外は記述を省略しています。

.wrapper {
  font-size: 17px;
}

section {
  display: inline-block;
}

.first  { background: lightblue; }
.second { background: orange; }
.third  { background: lightgreen; }

結果

inline-block を設定した <section> 要素の間にすき間ができてしまいました。

原因は、意図せずに挿入される「半角スペース」です。

Firefox の「ウェブ開発ツール」で HTMLソース を調べてみると、実際に「空白」が挿入されているのが分かります。

解決方法

【方法1】 「フォントサイズ」を変える

「空白」ができる原因は、意図せずに挿入される「半角スペース」です。

CSS

「半角スペース」の「フォントサイズ」を 0 にすることで、無かったことにします。

.wrapper {
  font-size: 0;
}

section {
  display: inline-block;
  font-size: 17px;
}

.first  { background: lightblue; }
.second { background: orange; }
.third  { background: lightgreen; }

【方法2】 「改行」を使わない

「半角スペース」が挿入される原因は、「HTML」を記述するときの「改行」です。

HTML

「改行」を使わずに inline-block 要素を記述することで、「半角スペース」の発生を防げます。

<div class="wrapper">
  <section class="first">1</section><section class="second">2</section><section class="third">3</section>
</div>

結果

別の解決方法

根本的な原因は display: inline-block; を使っていることです。

inline-block の代わりに flex や grid を使うことで、意図しない「空白」は挿入されなくなります。

flex grid の使い方については、自身で調べてみて下さい。「チートシート」などで検索すると、まとめられた情報が出てきます。

参考資料

ホワイトスペースの扱い - MDN