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


　　下面是详细解释：


　　根据W3C规范9.4.2：inline-formattingcontext、W3C规范10.8：line-height，行框高度计算过程大致如下：


　　根据'line-height'属性计算出每个行内元素的行内框高度；


　　根据'vertical-align'属性计算出每个行内框的垂直对齐方式；


　　行框的高度是垂直对齐排列最上面框的定边和最下边框的底边距离；


　　如果行内框字号设置大于行内框的'line-height'设置，文字将溢出当前行框，他可能造成多行时文字相互覆盖；


　　每个计算出的行框在垂直高度上排列没有间隙；


　　在没有其他块级内容的情况下，整个容器的高度取决于多个行框累计的高度。


　　line-height影响到的是步骤1


　　vertical-align影响到的是步骤2、3


　　@Only1Word的理解有误，font-size只通过影响line-height来间接影响行框的高度。


　　但是chrome和safari有错误的机制，影响了步骤4（font-size大于line-height的情形）的正确表现，详见http://www.w3help.org/zh-cn/causes/RD5017。


　　（更新，这个bug已均被safari和chrome修复。）