img标签在HTML5和HTML4.0.1的严格模式渲染的时候,下面会有几像素的空白。
解决方法就不用说了,都晓得,求问下产生原因。
又测试了下行内块。里面没有文字的行内块表现和img一样,有文字的行内块下面不会出现空白。
网上搜全是说解决方法的,求大牛解释下产生原因。
问题效果如下:
你想知道的原因 :)
说实话我并不喜欢像知乎一样, 长篇大论.
刚好 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 原理以及过程. ( 出糗了.. )
这问题谁赞的?
http://.com/q/1010000000156955
看看这个,
http://www.html-js.com/article/1758
为什么图片下面总是会多出3-5像素
是我赞的问题,我认同对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
影响到的是步骤1vertical-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修复。)