inline-block の隙間を無くす方法

inline-blockの特徴

• 横に並ぶ
• 上下左右にmarginを指定できる
• 上下左右にpaddingを指定できる
• vertical-alignを指定できる

これが主な特徴になるんですが、さらにinlne-blcok値であるがゆえの固有のふるまいがあります。それが 要素間と要素下に出来る隙間 です。

<div style="max-width: 600px; background: red;">
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

赤が親要素です。その中に3つのボックスがあり、それぞれのdisplay値が inline-block です。横幅は四則計算で calc(100% / 3) これは100%割ることの3という意味です。通常計算では33.3333… となり割り切れませんが、ブラウザがうまいことやってくれます。要は、このhtml(インラインCSS含む)内容で通常ならばきっち収まるはずの計算式です。

が、実際には各子要素間に隙間がありますので、親の width: 600px では領域が足りなくなり、最後の黄色のボックスは下へ折り返しています。この原因は ソースコードを要素間改行している ためです。

inline-block間の横方向の隙間をなくす

<div style="max-width: 600px; background: red;">
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div><div style="display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div><div style="display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

左右の隙間が無くなりました。htmlソースコードで子要素同士に入れた改行を無くしただけです。
inline-blockは要素間改行すると横に隙間が出来ます
最も簡単な対処法は改行を無くすことです。inline-block同士の話ですから、display値が block である親要素の区切りで改行を入れるのは問題ありません。

ソースを横にズラズラ書くと視認性が悪いと考える方は以下の方法も有効です。

<div style="max-width: 600px; background: red; letter-spacing: -.4em;">
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

letter-spacing というプロパティは文字間の調整です。ネガティブ(マイナス)値を指定することで文字間隔が詰められます。これを利用して -.4em を指定するとinline-blockの隙間を詰めることができます。letter-spacingの影響を受けるのは inline や inline-block ならでは。inlineの代表が「テキスト」「文章」です。

ただしこの親要素にletter-spacingが指定されたinline-blockの中に「テキスト」が有る場合は以下のようになります。

文字が重なっていますよね。letter-spacingで詰めたのですから当然です。これを避けるには

<div style="max-width: 600px; background: red; letter-spacing: -.4em;">
  <div style="letter-spacing: normal; display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div>
  <div style="letter-spacing: normal; display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div>
  <div style="letter-spacing: normal; display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

子要素側(inline-block指定要素)に直接 letter-spacing: normal を指定して通常の状態に引き戻します。

テキストが入っただけで下に隙間が無くなっている点に注目。
これはletter-spacingの効果ではありません。

子要素3つは全て height: 30px の指定がありますので、本来なら親要素も子要素に広げられて同じ30pxの縦幅になるはずですが、inline-block固有の隙間によって30pxよりも大きくなっています。でもテキストが入った方は何故かぴったりフィット。

inline-block指定要素下の隙間をなくす

<div style="max-width: 600px; background: red;">
  <div style="vertical-align: top; display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div><div style="vertical-align: top; display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div><div style="vertical-align: top; display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

inline-blockは「テキスト」の特徴を踏襲していますので、同じく「文字の」ベースライン の概念も適用されます。

欧文には下に飛び出す文字がありますのでこういう細かい分類になっています。inline-blockのペースラインの初期値は baseline です(スクショ参照)
この合わせにしているので下に飛び出てしまう、つまり下に余分な空間ができます。ですからこの垂直のいち合わせ vertical-align を top または bottom に変更します。これで隙間が無くなります。

まとめ

inline-blockは本来横に並べられないものを横並びにできますし、margin, paddingも指定できて便利なんですが、こういったはまりどころを持っています。
テキストが入っている時は良いんですが、例えば5つあるナビゲーションリンクのうち、4つはテキスト、1つは webアイコン なんて時にはまりやすい。 「なんだかわからないけど親要素の縦幅が大きくなる (；ωq｀)」という場面に出くわしたら、その子要素のdisplayプロパティをチェックしてみることをおすすめします。