floatで出来る縦方向の隙間対策にfont-size:0;を使うな

vertical-align:bottom;を使ってくださいねー。今はフォントサイズ以外の方法がちゃんとありますので。

久しぶりに技術の話。
つい最近「floatを使ったら縦に隙間が出来てしまった。font-size:0;を使えば直るんですけど文字の％指定が無効になっちゃって…」という話が来てびっくりしたので。
というかいつの時代ですか！

font-sizeを0にして難を逃れるなんて下の下策です。他に方法があるのでやめましょう。

上にも書いたように代替にvertical-align:bottom;を使えばOKです。
vertical-align:bottom;の場合指定する場所にコツがあって、
指定するのは、floatをかけたタグ内にある画像要素すべてにします。
imgタグにかけると大体直ります。

<ul class="clearfix">
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
</ul>

<ul class="clearfix">
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
</ul>

（css）
ul{ padding:0; margin:0; list-style-type:none;}
ul li{ float:left; padding:0; margin:0; list-style:none;}

例でソースを書きましたが、これを実際に動かすと縦に隙間が出来ます。
これは、floatがかかっているblock内（li内）の要素に画像がある場合改行コードが文字として認識されてしまいフォントサイズ文の幅を持つバグです。
正直ばかばかしいバグです。

直すにはvertical-align:bottom;を使います。ie6でもie7でも対応してますので。

（css）
ul{ padding:0; margin:0; list-style-type:none;}
ul li{ float:left; padding:0; margin:0; list-style:none;}
ul li img{vertical-align:bottom;}

font-size:0;で直した場合以下の問題がありますので絶対にやめましょう。
・フォント表示されないと画像読み込めなかった人にはどう対応する気なの？
・SEO的に良くなさそう。画像にaltはいってるでしょ？その文字隠し文字扱いになりそうじゃない？
・％指定のサイトだと文字可変がそこの子要素でできなくなる

vertical-align:bottom;でなぜ直るかというと、そもそもの原因が初期設定でインラインのvertical-alignがbottom、画像のvertical-alignがbaseline？のため、上下でずれてしまうのが原因と見ています。
そのためテキストのほうに画像も合わせてやれば直るみたいです。
しかしそうすると今度は右に隙間が出来そうなものなのですが…できません。
じつはvertical-align:top;にしても直るのでbaseline指定が誤作動起こすのかも？他にもtext-topとかにしたら隙間できそう。
バグだしあまり追求しても仕方ないですけども。