示例: 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
单元格的内边距的下边缘与行的底端对齐。
可以取负值。