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

公開日: 2012年6月29日 最終更新日: 2018年4月18日

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

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

例えばこんなソース

解決方法

方法1:改行をなくす

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

方法2:タグ間の改行をなくす

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

方法3:コメントを使う

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

方法4:親要素の文字間をCSSで詰める

親要素の文字間をletter-spacing-0.4emと設定。
子要素の文字間を元に戻す。
CSSでも謎のスペースを消すことができました。

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

お気軽にコメントをどうぞ。