inline-blockで生じる隙間の原因と対処法

/ Web / Comment[0]

横並びさせるためにdisplay:inline-blockを指定した場合、隙間が開いてしまう場合があります。今までこれを何も考えずletter-spacingを-0.4emかけて潰していたのですが、原因がわかったので対処法を書きたいと思います。

以下のソースを見てください。div.listの中のdiv.itemが横並びするというものです。

<style>
div.list div.item {
  width: 100px;
  display: inline-block;
  background: red;
}
</style>

<div class="list">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>

表示結果

item1
item2
item3
item4

おそらく殆どの環境で、div.item間に隙間が開いているかと思われます。

隙間の正体

通常のブロックレベル要素はソースコードに改行を入れてもスペースなどは入りませんが、inlineとinline-blockでは改行がスペースに変換されるのです。そのためソースコードの整形目的の改行が半角スペースとして挿入されます。

半角スペースのサイズがすべての環境で0.4emとは限りませんので、letter-spacing:-0.4emで潰すのは少し曖昧です。実際に、chromeやsafariでナビ部分をコーディングしたところ、スライス画像が1px重なりボーダーが消えてしまう現象を確認しています。

解決方法

解決方法としては以下の4つ+1つが挙げられます。

  • 要素の後に改行を入れない
  • letter-spacing:-0.4emでスペースを潰す
  • font-size:0でスペースのサイズを0にする
  • word-spacing:-0.4em;でスペースを潰す
  • 他のレイアウト手法を試す(float, display:table, display:flex)

要素の後に改行を入れない

改行がスペースを作ってしまう要因なので要素の後に改行を入れなければいいのです。
次の例では、divのとじタグの後に次のdivをくっつけることでスペースの挿入を防ぐ方法です。

<div class="list">
  <div class="item">
    item1
  </div><div class="item">
    item2
  </div><div class="item">
    item3
  </div><div class="item">
    item4
  </div>
</div>

あるいは、以下のように改行にコメントを入れることでスペースを無くすこともできます。プレーンテキストの見た目は汚くなりますが、エディターによってはコメントアウトは目立たないように表示されるため視認性が落ちる事は少ないかと思います。

<div class="list">
  <div class="item">
    item1
  </div><!--
--><div class="item">
    item2
  </div><!--
--><div class="item">
    item3
  </div><!--
--><div class="item">
    item4
  </div>
</div>

表示結果

item1
item2
item3
item4

多少コードは汚くなりますが隙間は入りません。

letter-spacing:-0.4emでスペースを潰す

半角スペースのサイズをネガティブをかけて潰す方法です。上で書いたとおり一部ブラウザ・環境で問題があります。

<style>
div.list2 {
  letter-spacing: -0.4em;
}
div.list2 div.item {
  width: 100px;
  display: inline-block;
  letter-spacing: normal;
  background: cyan;
}
</style>

<div class="list2">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>

表示結果

item1
item2
item3
item4

font-size:0でスペースを潰す

letter-spacingの方法よりは確実ですが、子要素で元のフォントサイズをpxなどの絶対値またはremで指定しなおさなければなりません。親に0pxと指定してしまうためemや%といった相対値が効かないのが不便なところです。

<style>
div.list3 {
  font-size:0;
}
div.list3 div.item {
  width: 100px;
  display: inline-block;
  font-size:16px;
  background: cyan;
}
</style>

<div class="list3">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>

表示結果

item1
item2
item3
item4

CSS3のremが使用できるならいいのですが、CSS2以下ではinline-blockの要素に絶対値でフォントサイズを指定しなおさなければならないため、フォントサイズの変更の際に苦労するでしょう。

word-spacingでスペースを潰す

letter-spacingと同じような方法です。詳しくはこちらをご覧ください。

他のレイアウト手法を試す

本末転倒な話ですが、レイアウトによっては他の手法を試したほうが簡単にできることもあります。

この記事では詳しく書きませんが、例を挙げると画像を文字の横に回りこませたい場合ではfloat、絶対にブロックを落としたくない場合はdisplay:tableやdisplay:flexと選択肢はいろいろあります。inline-blockには横幅いっぱいまで並んだら次の段に落ちて整列するというメリットもあります。

レイアウトに合わせてそれに適したプロパティを使用しましょう。

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可

↑