inline-blockなどの横並びによる謎の隙間

css

[html] <div class="hoge"> <div class="fuga"></div> <div class="fuga"></div> <div class="fuga"></div> </div> [/html] [css] .fuga{ display:inline-block; } [/css]

inline-blockによる謎の隙間ができる問題
改行しなかったりコメントを使ったり色々ありますがHTML自体が見辛くなったり美しくなくなったり・・・

解決法その1

[css] .hoge{ letter-spacing:-0.3em } .fuga{ display:inline-block; letter-spacing:normal } [/css]

親要素で文字間隔を詰め、子要素で文字間隔を戻す。

解決法その2

[css] .hoge{ font-size:0; } .fuga{ display:inline-block; font-size:16px; } [/css]

親要素のfont-sizeを0にして目的のクラスでfont-sizeを設定すると、隙間がなくなる。