inline-blockで発生する隙間(空白)を消す方法

2012年6月29日 2018年8月30日 WEB

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


imgタグを横並びにしようとすると謎のスペースが出来ます。
display:inline-blockでも同じような空白ができますね。

この隙間は、コードの上での改行が空白として認識してしまっているからなんですね。

HTMLはこんなソースになってませんか?

ふつう、こうやってタグ毎に改行して見やすく記述しますよね。

それでは、.boxにはinline-blockを適用して解決方法を紹介!

解決方法1:改行自体をしない

しかし、これだとソースが冗長になり見辛い。。。

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

閉じタグの前で改行し、div要素間での改行ではないようにします。

これでもまだ見辛い。。。

解決方法3:コメントを使う

コメントを挟むようにして改行。

まだ少しは見やすくなった?

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

親要素の文字間をletter-spacing-0.4emと設定。
子要素の文字間を元に戻す。

CSSで謎のスペースを消すことができました。

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?