【HTML】inline-block要素横並びの余白解決方法【CSS】

どうも、くまだです。

inline-block要素を横並びにしたときに発生する謎余白の解決法のメモ。

inline-block要素横並びの余白解決方法

どういう現象かというと、横に並べたい要素にdisplay: inline-block;を指定して要素が横にならんだときに、marginを指定していないのに要素間に謎余白ができている現象です。↓

上記画像の状態のコードは下記。

  <div class="box">
    <div class="box__item">てきすと</div>
    <div class="box__item">テキスト</div>
    <div class="box__item">text</div>
  </div>

.box__item {
  display: inline-block;
  background:blue;
  text-align:center;
  padding: 10px 12px;
  color:#fff;
  line-height: 1;
  font-size: 16px;

}

display: inline-block;を指定した.box__itemクラス要素には、marginを指定していないのにも関わらず、要素間に余白ができています。Chromeだけじゃなくて、FireFoxやEdgeでも確認しました。

（現象の再現自体は簡単にできるのでやってみるといいかもです）

これの解決方法は、親要素（inline-block要素の親）にfont-size:0;を指定すると謎余白が消えます。

.box {
  font-size: 0; /* 追記 */
}

.box__item {
  display: inline-block;
  background:blue;
  text-align:center;
  padding: 10px 12px;
  color:#fff;
  line-height: 1;
  font-size: 16px;

}

要素間の謎余白が消えました。テキストのフォントサイズについては、親要素にfont-size: 0;を指定しても子要素にfont-sizeを指定すればいいと思います。

ulのliタグやolのliタグなんかをdisplay: inline-block;で横並びにするケースでも同様の現象があると思います。flex使えばいいだけなんですが、場合によってはflex使いたくないときがあるかもしれない…

ちなみにこの謎余白の正体ですが、inline-blockにした要素のテキストに改行が入っているために起こります。なお、letter-spacingでも調整することも可能です。

ここまで読んでくださりありがとうございました。