inline-blockで隙間をなくす

問題

display: inline-block を指定するとブロックを横に並べることができるが、ブロックとブロックとの間に隙間ができることがある。このため、単純にコンテナとコンテンツの幅を合わせただけでは隙間が開いたり、改行されたりする。

原因

複数の原因がある。

改行や空白文字による空白によるもの。

文字と文字の間隔によるもの。

ベースライン(baseline)の下部分(decender, ディセンダー)の空白によるもの。

ディセンダーが分かる文字(ASCII 英字のみ)

j, g, p, q, y

標準の文字サイズが分かる文字

MM

連続する空白や改行は、1文字の空白文字として扱われる。これが隙間になってしまう。

div 要素を並べる時に、分かりやすさからインデントのための空白や改行を入れてしまうが、この改行が空白1文字(単語分割, word-break)として出力されてしまう。

ベースラインからの描画によるもの。

対処

コンテンツに vertical-align: bottom; を適用する。

親要素で font-size: 0; を適用する。

参考