今天在制作一个网页的时候又碰到以往曾经碰到的问题，在图片下面会出现莫名的下边距，刚好这次制作不像以往那么急，所以抽出空来测试了下
问题
发现，在FF中下边距大概是多出了3像素左右，而IE6更多，在IE8中展示却是完好的，以往的做法只需要将img定义为块状级就解决了问题，而对于其原理却一直都不知道
今天google了下很荣幸的找到了答案
“图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小
如果将图片的垂直对齐方式设置为 top 或 bottom，我们会发现这个空隙也会消失。
行内元素的格式化实际上比我们想像的要复杂得多
解决办法
:解决办法给img定义vertical-align或者定义为块状，最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零，font-size:0
本文总阅读量次
