关于html的行高设置的问题

Question

<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>

求教，请问上面现象的原因是什么呢？

Answer 1

不是很清楚你的问题额，能在详细点表述下吗

//////////////////////////把写在评论的粘贴上来/////////////////////

因为同一个块级的div的行内框高度为line-height:32px，而span的行内框高度为line-height:20px，所以最终其行框高度还是32px，所以当设置span的line-height小于div的line-height后，一行的高度还是32px，而当你把span重新控制进一个块级元素后，是两个块级元素，行框等重新对该块级元素内的行内元素或文本产生作用，也就是line-height:20px