画像やdisplay:inline-blockで発生する空白スペースを消す方法

2012年6月29日 CSS NAndo

display:inline-blockで発生する謎のスペース

余計な隙間ができる
imgタグを横並びにしようとすると謎のスペースが出来ます。
display:inline-blockでも同じような空白ができますね。
この隙間は、改行が空白として認識してしまっているからなんですね。

例えばこんなソース

パターン1 改行をなくす

これだとソースが冗長ですね。

パターン2 タグ間の改行をなくす

わざと閉じタグの前で改行しdiv要素間の改行をなくします。

パターン3 コメントを使う

HTMLコメント内で改行させます。

パターン4 親要素の文字間をCSSで詰める

親要素の文字間をletter-spacing-0.4emと設定。
子要素の文字間を元に戻す。
CSSだけでも謎のスペース問題は解決できました。

以上、display:inline-blockしたら現れる謎のスペースの消し方でした。