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

<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を設定すると、隙間がなくなる。