解决img下边距

今天在制做一个网页的时候又碰到以往曾经碰到的问题，在图片下面会出现莫名的下边距，恰好此次制做不像以往那么急，因此抽出空来测试了下，发现，在FF中下边距大概是多出了3像素左右，而IE6更多，在IE8中展现倒是无缺的，以往的作法只须要将img定义为块状级就解决了问题，而对于其原理却一直都不知道，今天google了下很荣幸的找到了答案： “图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。因此在某些时候，图片底部的空隙多是 2px，而有时多是 4px 或更多。不一样的 font-size 应该也会影响到这个空隙的大小。

若是将图片的垂直对齐方式设置为 top 或 bottom，咱们会发现这个空隙也会消失。

行内元素的格式化实际上比咱们想像的要复杂得多，这也是我至今不肯面对的一个知识点。还好它并不经常使用。

p.s. 我如今甚至怀疑书上提到的“某些浏览器”指的是第一个能显示图片的浏览器 Mosaic。由于刚刚在翻阅《CSS权威指南(第三版)》中文版时，在第 204 页发现了它，而那一页讲述的正是行内元素的布局模型。我最近也在研究浏览器的历史，历史真的很是有意思。”这个是蓝色理想中版主说的一句话，我仔细的测试了下，确实给图片定义vertical-align也能够解决这个问题，我一直觉得是觉得没有清除img这些元素的默认内外边距引发的，如今才知道原来行内元素也有它的默认布局模型，这些布局模型不单单只是块状级元素才有的！看来css不单单是要掌握技巧还有它的原理这样才能本身知道问题解决问题了，还要加油啊！

ps:解决办法给img定义vertical-align或者定义为块状，最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。固然还有种极端解决办法你们能够试试就是将  父容器的字体大小为零，font-size:0