<style>
div { display: block; }
</style>
<!-- 开发者模式下可见span的行高的确为20px;但实际显示效果仍然有32px -->
<div style="line-height: 32px; width: 200px;">
这是div这是div这是div这是div这是div
<span style="line-height: 20px;">
这是span这是span这是span这是span这是span
</span>
</div>
<!-- solution: span包在另一块状元素内,显示上就是20px行高 -->
<div style="line-height: 32px; width: 200px;">
这是div这是div这是div这是div这是div
<div style="line-height: 20px;">
<span>这是span这是span这是span这是span这是span</span>
</div>
</div>
求教,请问上面现象的原因是什么呢?
不是很清楚你的问题额,能在详细点表述下吗
//////////////////////////把写在评论的粘贴上来/////////////////////
因为同一个块级的div的行内框高度为line-height:32px,而span的行内框高度为line-height:20px,所以最终其行框高度还是32px,所以当设置span的line-height小于div的line-height后,一行的高度还是32px,而当你把span重新控制进一个块级元素后,是两个块级元素,行框等重新对该块级元素内的行内元素或文本产生作用,也就是line-height:20px