インライン要素で謎の隙間が出てくる問題

<div class="hoge">
    <div class="fuga"></div>
    <div class="fuga"></div>
    <div class="fuga"></div>
</div>

.fuga{
    display:inline-block;
    margin:0px;
}

とかやっても何故か謎の隙間が出来てします。
float:leftとかにするのも手ですが、heightをしっかり出したいときにfloatは使えません。

---

http://qiita.com/chitoku
chitokuさん指摘事項追記
　
ここで生じている隙間は HTML 上のスペースによるものです。

<div class="hoge">
    <div class="fuga"></div><div class="fuga"></div><div class="fuga"></div>
</div>

のように詰めてしまうか

<div class="hoge">
    <div class="fuga"></div><!--
 --><div class="fuga"></div><!--
 --><div class="fuga"></div>
</div>

のようにコメントアウトする方法がよく取られます。
(chitokuさん指摘ありがとうございました！)

---

HTMLを上記のように編集出来ない場合はCSSで親要素のfont-sizeを0にして目的のクラスでfont-sizeを設定すると、隙間がなくなります。

.hoge{
    font-size:0;
}
.fuga{
    font-size:20px;
    display:inline-block;
}

めでたしめでたし