inline-blockなどの横並びによる謎の隙間
css
<div class="hoge"> <div class="fuga"></div> <div class="fuga"></div> <div class="fuga"></div> </div>
.fuga{ display:inline-block; }
inline-blockによる謎の隙間ができる問題
改行しなかったりコメントを使ったり色々ありますがHTML自体が見辛くなったり美しくなくなったり・・・
解決法その1
.hoge{ letter-spacing:-0.3em } .fuga{ display:inline-block; letter-spacing:normal }
親要素で文字間隔を詰め、子要素で文字間隔を戻す。
解決法その2
.hoge{ font-size:0; } .fuga{ display:inline-block; font-size:16px; }
親要素のfont-sizeを0にして目的のクラスでfont-sizeを設定すると、隙間がなくなる。