问答详情
源自:3-1 vertical-align与line-height

行高会改变基线的位置?

6分1秒的地方有说到,行高变为0后,基线位置会上移,是这样吗

提问者:Ben_0032 2016-10-26 20:29

个回答

  • 红果果的青蛙
    2017-01-28 13:50:34

    看了6'01'',张老师没有提到过基线上移吧。

    本质上,基线根本没有移动,自始至终都是英语作业本中的那条红线。

    那个承载着图片和文字并且底下有一段空白的框框是什么东西?那是containing box。

    空白框框怎么出来的?张老师说的很清楚,由于baseline对齐,字符的baseline底下还有一小段空间,会把containing box撑开。

    现在,图片所在元素的line-height指定为0了,由于line-height是可继承属性,没有特别设置的话内部所有子元素的line-height就都会为0,这些元素生成的inline boxes的高度也自然为0。

    最终,为了生成containing box,在计算containing box的高度的时候,就只有img有高度,其他字符类的元素都没有高度,所以也就不会撑开底下那一段空白了。

  • Mext
    2016-10-28 07:29:18

    确实如此。大约4像素。实践出真知,建议你用

    <a href="#"><img src="x/xx.jpg"></a>
    a{display:block;}
    a{display:block;line-height:0}

    二者做个比较,注意用控制台作比较。你就会发现前者的a要比后者高4px。