display:inline-blockの隙間はHTMLの空白文字から生じる

display: inline-blockで横並びにした要素の間へ隙間が残るなら、最初にHTMLの改行と字下げを確認します。margin: 0だけでは、要素間の空白文字を消せません。

隙間が不要なら、隣り合う終了タグと開始タグの間へ空白文字を出力しない方法が確実です。隙間を残す設計なら、HTMLの整形に任せず、CSSのmarginなどで寸法を明示します。

inline-blockは外側ではインラインとして並ぶ

CSS 2.1のdisplayプロパティは、inline-blockをインラインレベルのブロックコンテナーと定義しています。内容はブロックとして整形されますが、要素自身は一つのインラインレベルの箱として行の中へ並びます。

ブロックコンテナーが直接含むテキストは、要素名のない匿名インラインとして扱われます。次の仮例では、二つのli要素の間にある改行と字下げも、HTMLに含まれるテキストです。

<ul class="menu">
  <li class="menu__item">商品</li>
  <li class="menu__item">料金</li>
</ul>

.menu__item {
  display: inline-block;
  margin: 0;
}

white-spaceの処理規則では、white-space: normalの空白文字列は折り畳まれます。折り畳みは、空白を必ずゼロにする処理ではありません。改行が空白として描画される環境では、二つのinline-blockの間に文字一つ分に相当する幅が残ります。

この幅は、marginやpaddingではありません。親要素のフォントと利用環境に左右されるため、「いつも4ピクセル」と決めつけることもできません。

marginを0にしても空白文字の幅は残る

三つの項目へwidth: 33.333%を指定しても、三つ目だけ次の行へ落ちることがあります。要素の幅だけで横幅をほぼ使い切り、そこへ要素間の空白が加わるためです。

この場合、項目のwidthを少しずつ減らす前に、次を分けて確認します。

開発用画面でmarginがゼロでも、HTMLの終了タグと次の開始タグが離れていれば、空白文字の可能性が残ります。CSSの幅を変える前に、HTMLまたは生成後のDOMを確認します。

隙間をなくすならタグ間の空白を出力しない

隙間をゼロにするなら、終了タグの直後へ次の開始タグを置きます。次は仕組みを示す仮例です。

<ul class="menu"><li class="menu__item">商品</li><li class="menu__item">料金</li><li class="menu__item">お問い合わせ</li></ul>

このHTMLには、隣り合うli要素の間へ描画対象となる空白文字がありません。フォントごとの空白幅を推測する必要もなくなります。

テンプレートから項目を繰り返し出力する場合も、要素間へ改行や字下げを加えないようにします。見た目を整えるための空白と、HTMLソースを読みやすくする字下げは、同じものではありません。横幅へ影響させたくない字下げを、出力結果へ残さないことが要点です。

HTMLを変えられない場合は親のfont-sizeを0にして子で戻す

管理機能がHTMLを生成しており、タグ間の空白を変更できない場合は、親要素のfont-sizeをゼロにし、各項目で文字サイズを戻す方法があります。

.menu {
  font-size: 0;
}

.menu__item {
  display: inline-block;
  font-size: 14px;
}

匿名インラインは、継承される文字の指定を親から受け取ります。この指定に対応する環境では、親の文字サイズをゼロにすると、要素間の空白も幅を持たなくなります。一方、子要素で文字サイズを戻し忘れると、項目内の文字まで表示できません。親の直下に説明文がある構造にも向きません。

この方法は、HTMLの原因を残したまま表示側で抑える方法です。対象ブラウザーと文字サイズの設定を確認できる場合に限り、代替として使います。HTMLの出力を変更できるなら、タグ間の空白をなくす方を先に選びます。

負のmarginで空白幅を推測しない

margin-left: -4pxのような指定は、あるフォントと文字サイズでは隙間を隠せても、空白そのものをなくしません。空白の幅と負のmarginが一致しない環境では、隙間が残るか、項目どうしが重なります。

隙間を設ける場合は、タグ間の空白をなくしたうえで、寸法をCSSへ書きます。

.menu__item + .menu__item {
  margin-left: 8px;
}

この8pxは説明用の仮値です。必要な寸法はデザインから決めます。HTMLの字下げが偶然作る幅を余白として数えず、項目の幅と意図した余白だけで一行へ収まるかを確認してください。