img下几像素空白产生原因

朱小毛
  • 136

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

问题效果如下:

请输入图片描述

回复
阅读 17.2k
5 个回答
Humphry
  • 16.3k
✓ 已被采纳

是我赞的问题,我认同对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 contextW3C规范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修复。)

6WQnWG37
  • 633

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


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


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

http://jsfiddle.net/pP5L3/1/embedded/result,html,css/

因为时间已经到了, 虎头蛇尾? 这种事情不重要啦!


还有我并不是太同意 @Humphry 的评论的, 因为这和匿名块框和行框并没有太大的关系.
@Humphry 的答案, 他的理解的角度更加深入到 CSS 原理以及过程. ( 出糗了.. )

Tenadolanter
  • 102

因为图片默认是行内元素,行内元素默认是baseline对齐的,和底部会有一段距离。

图片描述

如上图,绿色线标出了top、text-top、middle、baseline、text-bottom、bottom相对应的位置。当div的高度和文字的高度是一样的时候,设置vertical-align属性为top、text-top或text-bottom、bottom,效果是一样的。

当vertical-align属性为top、text-top时候,图片顶部和线对齐

当vertical-align属性为middle时候,图片中间和线对齐

当vertical-align属性为baseline、text-bottom、bottom时候,图片底部和线对齐

具体可以参考:为什么图片下面总是多几个像素空白?

宣传栏