inline-blockの隙間を詰める方法

ブロック要素を横に並べる方法として最近はdisplay:flexが多くなってきましたが、対応していないブラウザがあったりするのでは、floatとかinline、inline-blockをメインで使う人も少なくはないと思います。

inline-blockはその名の通り、inlineとblockのいいとこ取りしたとても便利なスタイルですけど、これ、横に並べるとなぜか謎の隙間があくんですよね。デベロッパーモードで調べても全然わからない(笑)

ここで諦めてfloatにするのも一つの手ですが、ちゃんと詰める方法があるので紹介。

1.改行しない

この「謎の隙間」はHTMLの改行コードをスペースと認識して起こる問題のようです。なんでかはわかりませんが、とにかくそういうことらしいです。なので改行せずに続けて書くと隙間がなくなります。

2.font-size:0

liの親要素(ul・ol)にfont-size:0、liにfont-size:0、もしくはfont-size:◯◯pxを記述すると隙間がなくなります。これも理由はよくわかりませんが。。。

PHPなどで動的にする場合は改行の無い場合の方がいいですが、静的にliを何個も書くような場合、改行無しでやると見づらいのでfont-size:0のやり方の方がいいでしょう!

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバック:https://recost-design.com/1676.html/trackback