【html】inline-blockに発生する謎の隙間を解決する３大方法

ニャンコ

インラインブロック要素で横並びにしたら、謎の隙間が出来たよ～
marginもpaddingも指定してないのになんで～？

これは改行によって発生しているんだ。
対処方法を説明していくね。

ワンコ

inline-blockに発生する謎の隙間

まずは、下記の図をご覧ください。
これは、inline-block要素３つを横に並べたものです。

やはり隙間が空いてますね。
ちなみに、cssは下記のとおりです。
marginもpaddingも指定されていませんね。

<div class="wrap">
  <p class="box"></p>
  <p class="box"></p>
  <p class="box"></p>
</div>

<style>
  .box {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
  }
</style>

原因は、それぞれのbox要素を改行していることが原因で、恐らくこれはhtmlの仕様だと思われます。

謎の隙間の解決方法

親要素に「font-size:0」を指定する

親要素に「font-size:0」を指定すれば、隙間は消えます。

/* ３つのboxの親要素であるwrapクラスに指定 */
  .wrap {
    font-size: 0;
  }

実際に指定してみました。
謎の隙間は消えました。

改行部分をコメントアウトする

改行部分をコメントアウトします。
これなら、改行していないことになるので、htmlの見た目も保ちつつ隙間を削除することができます。

<div class="wrap">
   <p class="box"></p><!--
--><p class="box"></p><!--
--><p class="box"></p>
</div>

こちらでも、隙間が消えました。
この方法なら、htmlにコメントアウトする手間はありますが、cssを変更する必要がありません。

flex等で横並びにする

そもそも「inline-block」を使用しない方法です。
横並びにするのならば、flex等でも使用でき、こちらのほうが色々改変が効くので良いかもしれません。

<div class="wrap">
  <p class="box"></p>
  <p class="box"></p>
  <p class="box"></p>
</div>

<style>
　.wrap {
  }
  .box {
    width: 50px;
    height: 50px;
    background-color: red;
  }
</style>

まとめ

以上　「inline-block」に出来る謎の隙間についてでした。
最近はあまり「inline-block」で横並びすることはないかもしれないので、あまりこの現象に遭遇することはないかもしれませんね。