【CSS】インラインブロック/インラインで勝手にできる余白の削除方法

HTML/CSS

インラインブロックやインライン要素を利用することで簡単に要素を横並びにできます。
しかし、要素同士の間に意図していない余白が勝手に生まれる問題があります。

今回はインラインブロックやインライン要素で勝手にできてしまう余白の削除方法について紹介します。
なお、簡単のためインラインブロックベースの参考実装のみ紹介しますが、インライン要素の場合も今回紹介する方法で問題を解決できます。

今回利用するサンプルコードについて

以下はインラインブロック間に余白が勝手についてしまう例です。

<div class="item lightblue">item</div>
<div class="item greenyellow">item</div>
<div class="item lightcoral">item</div>
<div class="item lightyellow">item</div>

.item {
  width: 60px;
  height: 60px;
  display: inline-block;
}

.lightblue {
  background-color: lightblue;
}

.greenyellow {
  background-color: greenyellow;
}

.lightcoral {
  background-color: lightcoral;
}

.lightyellow {
  background-color: lightyellow;
}

See the Pen
inlineblock-with-space by Toshiharu Nishina (@nishina555)
on CodePen.

今回は上記の余白の削除方法をいくつか紹介します。

インラインブロックの余白を削除する方法

インラインブロックの余白を削除する方法
  • 改行なしでインラインブロックを記述する
  • インラインブロックの親要素に『font-size: 0;』を適用する
  • インラインブロックの親要素に『letter-spacing: -1em;』を適用する

以下ではそれぞれの方法について紹介します。

方法1: 改行なしでインラインブロックを記述する

インラインを適用するHTMLタグを改行なしで記述すると余白が削除できます。具体例は以下の通りです。

<div class="item lightblue">item</div><div class="item greenyellow">item</div><div class="item lightcoral">item</div><div class="item lightyellow">item</div>

.item {
  width: 60px;
  height: 60px;
  display: inline-block;
}

.lightblue {
  background-color: lightblue;
}

.greenyellow {
  background-color: greenyellow;
}

.lightcoral {
  background-color: lightcoral;
}

.lightyellow {
  background-color: lightyellow;
}

See the Pen
inlineblock-no-new-line by Toshiharu Nishina (@nishina555)
on CodePen.

方法2: インラインブロックの親要素に『font-size: 0;』を適用する

この方法の具体的な手順は以下の通りです。

  1. インラインブロックのグループを親要素で囲む
  2. 親要素に『font-size: 0;』を適用する
  3. 子要素（インラインブロック要素）に元のfont-sizeを適用する

具体例は以下の通りです。

<div class="container">
  <div class="item lightblue">item</div>
  <div class="item greenyellow">item</div>
  <div class="item lightcoral">item</div>
  <div class="item lightyellow">item</div>
</div>

.container {
  font-size: 0;
}

.item {
  width: 60px;
  height: 60px;
  display: inline-block;
  font-size: 16px;
}

.lightblue {
  background-color: lightblue;
}

.greenyellow {
  background-color: greenyellow;
}

.lightcoral {
  background-color: lightcoral;
}

.lightyellow {
  background-color: lightyellow;
}

See the Pen
inlineblock-fontsize-zero by Toshiharu Nishina (@nishina555)
on CodePen.

方法3: インラインブロックの親要素に『letter-spacing: -1em;』を適用する

letter-spacingは字間を調整するプロパティです。この方法の具体的な手順は以下の通りです。

  1. インラインブロックのグループを親要素で囲む
  2. 親要素に『letter-spacing: -1em;』を適用する
  3. 子要素（インラインブロック要素）に元のletter-spacingを適用する

親要素のletter-spacingで指定する値は、十分に大きなマイナス値であれば-1em;でなくても問題ありません。
ですので、たとえばletter-spacing: -100px;やletter-spacing: -10em;でも代替可能です。

インラインブロック要素で指定するletter-spacingは、letter-spacingの初期値はnormalですので、特に字間の調整をしていないのであればnormalを指定します。

具体例は以下の通りです。

<div class="container">
  <div class="item lightblue">item</div>
  <div class="item greenyellow">item</div>
  <div class="item lightcoral">item</div>
  <div class="item lightyellow">item</div>
</div>

.container {
  letter-spacing: -1em;
}

.item {
  width: 60px;
  height: 60px;
  display: inline-block;
  letter-spacing: normal;
}

.lightblue {
  background-color: lightblue;
}

.greenyellow {
  background-color: greenyellow;
}

.lightcoral {
  background-color: lightcoral;
}

.lightyellow {
  background-color: lightyellow;
}

See the Pen
inlineblock-letterspacing-minus by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND