css - 为什么段落的首行行高偏低？？？

问题描述

问 题

<div  id="text">确认全部重新生成JSP代码？<br/>
此操作会重新生成所有模板和历史版本的JSP。此功能一般是系统升级时，表单需要重新保存才使用，请勿随意操作！操作过程会较缓慢，请耐心等待。
</div>

 #text{
             width:400px;
            height:300px;
            border:red dotted 1px;
            padding:0px  25px  0px  25px;
            font:14px/27px  "microsoft yahei";/*既然行高27px为什么第一行不是27px？？？？*/
            text-align:left;
            text-indent:35px;
    }

如图，行高27px，但是首行行高明显偏低？？？
问题2：当给div设置padding-right后,文字不会向下排列而是撑开div的宽度？？求大神解释

解决方案

问题1：可以简单的这样理解：(line-height - font-size)/2,得到的值平均分在文字的上下端，所以行高是一样的。你别设置#text的高度，在浏览器中就能看到：如果有两行文字，#text的高度应该是 2 * 27px + 2px = 56px (border值2px)

问题2：盒子模型有两种：IE盒子模型、标准W3C盒子模型
浏览器默认采用了标准W3C盒子模型，如果你设置#text{box-sizing:border-box;}（采用IE盒子模型）就会看到#text总的宽度并不会增加。

这篇关于css - 为什么段落的首行行高偏低？？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！