img下几像素空白产生原因

img标签在HTML5和HTML4.0.1的严格模式渲染的时候，下面会有几像素的空白。
解决方法就不用说了，都晓得，求问下产生原因。
又测试了下行内块。里面没有文字的行内块表现和img一样，有文字的行内块下面不会出现空白。
网上搜全是说解决方法的，求大牛解释下产生原因。

问题效果如下：

解决方式：

原因在于块级元素内部默认有行框，行框撑高了块级元素。img和其他块级元素并列的时候，由于img默认是display:inline-block，因此也会产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素。这也是为何把图片添加上display:block，或者父层级font-size、line-height能够解决这个的原因。