<img>元素底部为何有空白

示例: http://codepen.io/GitKou/pen/NrGbXP

块级元素内部默认有行框，行框撑高了块级元素。img和其他块级元素并列的时候，由于img默认是display:inline-block，因此也会产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素。

取值 (行内(inline)元素)

多数值是相对于父元素：

baseline
元素基线与父元素的基线对齐。一些 可替换元素，比如 <textarea> ， HTML标准没有说明它的基线，这意味着使用这个关键字，各浏览器表现可能不一样。
sub
元素基线与父元素的下标基线对齐。
super
元素基线与父元素的上标基线对齐。
text-top
元素顶端与父元素字体的顶端对齐。
text-bottom
元素底端与父元素字体的底端对齐。
middle
元素中线与父元素的小写x中线对齐。
<length>
元素基线超过父元素的基线指定高度。可以取负值。
<percentage>
同 <length> , 百分比相对于 line-height 。
下面两个属性不像上面的属性相对于父元素，而是相对于整行：

top
 元素及其后代的顶端与整行的顶端对齐。
bottom
元素及其后代的底端与整行的底端对齐。
如果元素没有基线baseline，则以它的外边距的下边缘为基线。

取值 (table-cell元素)

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
与同行单元格的基线对齐。
top
单元格的内边距的上边缘与行的顶端对齐。
middle
单元格垂直居中。
bottom
单元格的内边距的下边缘与行的底端对齐。
可以取负值。

• https://segmentfault.com/q/1010000000441100
• https://www.zhihu.com/question/21558138
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
• http://www.html-js.com/article/1758