有关于css中行高的问题

分析css中行高的问题

在网页中到底文字的行高是怎么算的，先说理论重点，然后举例说明：

本文重点是以下两点：

第一点：针对中文字的行高，在这里我推算了一个公式即使： 行高=文字大小+文字上下两边相等之和。

第二点：

设置行高后，文字处在行高的中间位置

解释这个公式 :

文字大小，这个不用多说。文字上下两边相等值和是什么意思？例如：文字的大小是20px，行高是80px,那么文字所在位置是：距离上边30px，距离下边是30px。

因为文字设置行高时，永远都是行高的居中位置。

• 举个例子1：设置一个div的高度20px，文字为20px。根据公式推算：上下两边距为0。

如下代码：

样式为：
    
    div{
			font-size:20px;
			height: 20px;
			line-height: 20px;
			border:solid 1px red;
			font-weight: "微软雅黑";
       }
	
代码结构：
	
	<div>
		请问您是二师兄吗？
	</div>
	
	
复制代码

浏览器结果为：

• 举个例子2：如果把div高度设置成50px，行高设置成30px。按照分析，行高为30px，文字大小占20px，那么文字距离上边的距离为5px，距离下边的距离也是5px。

代码如下：

结构代码：

<div>
	请问您是二师兄吗？
	<span>
		这个是下面一层的
	</span>
</div>


样式代码如下：

div{
	font-size:20px;
	height: 50px;
	line-height: 30px;
	border:solid 1px red;
	font-weight: "微软雅黑";
}
span{
	display: block;
	border:solid 1px black;
	height: 16px;
	font-size:16px;
	line-height: 16px;
}


复制代码

浏览器结果为：

所以css中的行高等于文字的高度加上上下两边相等的距离。