图片4像素底边

Posted 2020-10-11 小平头~

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

 

下面是详细解释：

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

1. 根据 ‘line-height‘ 属性计算出每个行内元素的行内框高度；
2. 根据 ‘vertical-align‘ 属性计算出每个行内框的垂直对齐方式；
3. 行框的高度是垂直对齐排列最上面框的定边和最下边框的底边距离；
4. 如果行内框字号设置大于行内框的 ‘line-height‘ 设置，文字将溢出当前行框，他可能造成多行时文字相互覆盖；
5. 每个计算出的行框在垂直高度上排列没有间隙；
6. 在没有其他块级内容的情况下，整个容器的高度取决于多个行框累计的高度。

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修复。）