img下几像素空白产生原因

发布于
2014-03-20

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

问题效果如下：

请输入图片描述

前端

阅读 19.7k

5 个回答

Humphry

✓ 已被采纳

是我赞的问题，我认同对CSS机制的详细探索。

从W3C标准涉及的机制来讲，DTD标准模式下，影响链条是这样的（已更新）：

                          font-size
                            ↓
                          line-height
                            ↓             ×××××××××××××
        ××××××××××××××    ××××××××××××    ×           ×
        × inline box × -> × line box × -> × block box ×
        ××××××××××××××    ××××××××××××    ×           ×
            ↑                             ×           ×
        vertical-align                    ×××××××××××××

普通流中，同一行的行内框高度，影响该行的行框高度；
对行内框设置的vertical-align同时会影响到行框的上下边界，thus，行框高度；
所有行的行框高度叠加，影响这些行框所在的块框高度；
img默认是inline-block，默认对齐于baseline，因此默认出现的行框的baseline以下的高度会加到它所在的块框（匿名块框也是，当内联元素和块级元素并列的时候会有匿名块框包裹内联元素）之上；
@路人挨踢甲引用的文章里介绍的，g啊y啊f啊之类的字母底部的高度，其实是对于块框的baseline和bottom之间高度的体现。

over。

下面是详细解释：

根据W3C规范9.4.2：inline-formatting context、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修复。）

6WQnWG37

6332710

发布于
2014-03-20

更新于
2014-03-21

这是一张图片
你想知道的原因 :)

说实话我并不喜欢像知乎一样, 长篇大论.
刚好 KILL la KILL 延迟至 02:40 开播没事干, 顺便来完善答案.

先来介绍 vertical-align 这是神马?
这个是用来修改或影响垂直布局的属性.它有 baseline, sub, super... 总共11个属性.
我们只介绍题目有关♂系的 top, middle, baseline, bottom.
它们对应着对应着上图的的四条辅助线, 默认是 baseline (第三条).