［HTML/CSS］display: inline-block で横並びにした際にできる隙間をなくす方法

こんにちわ！Noob Web Designer（@NoobWebDesigner）です！

今回は、display: inline-block で要素を横並びにした際にできてしまう隙間を、なくす方法を紹介します。

Flexbox とか Grid とか便利なCSSプロパティが出ていますが、IE9の対応をする以上 display: inline-block も現役です。私個人としては横並びにする場合であれば、float より便利だと思います。カラム落ちもこちらの方が断然楽です。

ですが、横並びにした際の制御が少々めんどくさいので、何か楽にする方法はないのかと思い、いろいろ調べた結果を備忘録。

---

まずは動作を確認するために、基本となる HTML と CSS を定義します。
下記には書きませんが、CSS Reset は実装済みです。

HTML:

<div class="container inline-block">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

CSS:

body{
  padding: 20px;
}
h1{
  margin-bottom:10px;
}
.container{
  margin-bottom: 30px;
}  
.item{
  width: 33.3333%;
  padding: 10px;
  border-radius: 8px;
  border: 3px solid #ccc;
  background: #ddd;
  box-sizing: border-box;
}

display: inline-block をかけて横並びにする。

まずは普通に要素に display: inline-block をかけます。

CSS:

.inline-block .item{
  display: inline-block;
}

結果

ただ単に要素に display: inline-block をかけただけではこのように隙間ができてしまいます。
この隙間の正体は不可視エレメントの改行コードです。

普段見えていないだけでインライン要素内で改行した際は半角スペース程度の隙間を生成します。これが隙間になります。

つまり改行コードさえ入れなければ、display: inline-block を使った際の要素間の隙間はなくすことができます。

display: inline-block をかける要素を1行で書く。

改行コードを書かなければ display: inline-block をかけた要素は横並びになります。つまり改行をせずに1行で書いてしまえばいいのです。

HTML:

<div class="container inline-block">
  <div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>

結果

改行コードが含まれないので、横並びになりました。
ただこのコーディング方法ですと、簡単なメニューであればこれで良いですが、それでもコメントアウトが少々煩わしい感じです。

コメントアウト内で改行する

コメントアウト内で改行をします。改行コード自体もコメントアウトされますので、上記の1行で書く処理と同じ処理になります。
この方法はわりと古くからある方法で、今現在もっとも多く使われている方法だと思います。

HTML:

<div class="container inline-block">
  <div class="item">A</div><!--
  --><div class="item">B</div><!--
  --><div class="item">C</div>
</div>

結果

実質改行コードが含まれないので、横並びになりました。
ただこのコーディング方法ですと、簡単なメニューであればこれで良いですが、それでもコメントアウト部分が少々煩わしい感じです。

CSSを使って隙間をなくす

現在は下記の二つの方法が主流なようです。

親要素に font-size: 0 をかける。

親要素に font-size: 0 を書けることによって改行コード自体を表示できないようにします。ただこの方法はfont-sizeをパーセント指定する場合に不具合があるようです。display: inline-block を掛ける子要素には font-size を指定しないと、テキストが何も表示されなくなるので注意。

CSS:

.inline-block{
  font-size: 0;
}
.inline-block .item{
  font-size: 16px;
  display: inline-block;
}

結果

letter-spacingを使う

letter-spacing で改行コードを表示させないようにする方法。考え方としては font-size: 0 と変わりませんが、こちらの方が凡用性が高いような気がします。社内で最近よく使われている方法はこちらですね。

CSS:

.inline-block{
  letter-spacing: -.4em;
}
.inline-block .item{
  display: inline-block;
  letter-spacing: normal;
}

結果

---

［付録A］閉じタグを書かない

閉じタグを書かなければ、こちらも隙間が生まれません。
ただ使えるタグが限られてしまいますので、それを覚えるよりだったら、上記のいずれかの方法で横並びできたほうが時短になると思います。

HTML:

<ul class="container inline-block">
  <li class="item">A
  <li class="item">B
  <li class="item">C
</ul>

結果

［付録B］display: inline-block をリセットする。

上記の display: inline-block を使った横並びは、いずれも display: block を使うことでリセットが可能です。

例：

@media screen and (max-width: 640px) {
  .inline-block .item,{
    display: block;
    width: auto;
  }
}

参考文献：
qiita.com