css中的line-height

line-height

line-height是一个比较常用的属性。我们常用的场合有两个：

1. 一是设置两段文字在垂直方向上的间距
2. 二是line-height和height相等，让单行文字垂直居中。

但它还有一些额外的东西是我们需要知道的

概要：

1. line-height是可以继承的。
2. p的高度不是由文字撑起来的。
3. 单行文本垂直居中一定要设置height吗？
4. line-height:1.5和line-height:150的区别

基本介绍

line:行 height：高度。和在一起，就是“行高”。行高这个词在word中也会出现，它的功能是设置一行文本所占的高度。当一段文字中有很多行时，设置它的值，可以调整多行文字之间的垂直方向的间距。

查看body的line-height属性

由于line-height属性是可以继承的，所以在最初的情况下，我们应该去body标签上去查询line-height的值。有两种方法去查看：

1. 通过开发者工具查看。写一个空白的html文档，用浏览器打开。调出开发者工具，选中body标签。然后就可以在computed面板中找到body的全部css属性了。
2. 通过js代码。
   getComputedStyle(document.body)["lineHeight"]。
   我测试的情况如下：

另外edge 和qq浏览器中这个值都是18px。不确定chrome浏览器中的“normal”是什么值。

可能在不同的浏览器下，line-height的值会有一些不同（这一点我不是很确定），所以一般在做css重置时，也加上去line-height的设置。
如

（来源：taobao 页）

（来源：简书）

由于line-height有继承性，也就是说如果一个元素你没有明确地指明它的line-height，则它会去使用离它最近的父级（包括祖辈）元素的line-height。

如上图中，“第一句话”使用了body的line-height，“第二句话”使用了div 的line-height，它们的不同高度说明了这个问题。

p标签的高度是由font-size决定的吗？

我们会很自然也认为p标签中有一些文字，那么p标签的高度就应该是由内部的文字撑起来的，而文本的大小是 由font-size来决定的，所以，p的高度也是由font-size的大小决定的。

实践证明，不是。

上面的代码中，可以看到，p中的font-size设置为了0，所以其中文字看不见了，但p仍然占据网页中的空间。因为它的line-height为50.如果我们把font-size和line-height的值交换下，会怎么样呢？

你可以看到，灰色的部分才是p的真正高度。

所以，p的高度并不是由font-size决定的，而是由line-height决定的。

单行文字的垂直居中需要设置height吗？

我们经常会看到类似于这样的写法；

div{height:50px;line-height:50px;}

这里的height:50px;是必须要的吗？

试试下面的代码：

<div style="line-height:80px;font-size:30px;background:#d1d1d1;">我是第一行</div>
<div style="line-height:80px;font-size:40px;background:#ddd;">我是第二行</div>
<div style="line-height:80px;font-size:60px;background:#ccc;">我是第三行</div>

我并没有设置它们的height值，你觉得这三行字还是处于垂直居中的状态吗？

结果是：三个div中的文字也是垂直居中的。
所以，如果你只是为了实现如题的目标，那么想想你是否真的需要height的设置。

line-height:1.5和line-height:150%有区别吗？

看如下代码：

        <div style="line-height:150%;background:#ccc;">我是第一行</div>
	<div style="line-height:1.5;background:#ddd;">我是第二行</div>

结果显示，这两行的文字的行高是相等的：24px。由于这里浏览器默认的字体大小是16px,所以line-height都变成了16*1.5=24px。
在这种情况下，文本中的line-height不涉及从哪里继承过来，都是在自己的标签上设置的。

再看下面的代码。
与上面的代码相比有两点不同：

1. 因为p标签上没有设置line-height，所以这里的文字的line-height要从它的父级元素的设置中继承过来。
2. 为了让文本换行，我加一个p标签的width。当然这只是为了看出效果。

	<div style="line-height:150%;background:#ccc;">
		<p style="font-size:30px;100px;">我是第一行</p>
	</div>
	<div style="line-height:1.5;background:#ddd;">

		<p style="font-size:30px;100px;">我是第二行</p>
	</div>

结果是：

很明显，两段文本的行高不一样的了。
解释如下：
对于line-height:150%，它先把自己的行高值算出来：150%*默认的字体大小16px = 24px。然后把这个24传给“我是第一行”，所以第一行文本的行高就是24px。理解就是，它不能把150%直接传给后代，而自己先算一个具体的px，传给下一代元素。

对于line-height:1.5。它自己把这个值传给了子元素p，所以p的行高是:1.5*自己的字体大小30px = 45px。理解是，1.5是一个值，可以直接向下一代元素传递。

结论：
百分值：先根据自己的font-size算出具体的line-height，直接把这个算出来的结果给下一代使用。
数值：直接把这个数值传给后代，让它们自己去再去根据自己的font-size*数值 得到自己的line-height。

你会了吗？真的会了吗？
好吧，你自己算下下面的代码中每个p中line-height是多少。

	<div style="line-height:150%;background:#ccc;">
		<p style="font-size:30px;100px;">我是第1.1行</p>
		<p style="font-size:40px;100px;">我是第1.2行</p>
	</div>
	<div style="line-height:1.5;background:#ddd;">
		<p style="font-size:30px;100px;">我是第2.1行</p>
		<p style="font-size:40px;100px;">我是第2.2行</p>
	</div>

最后：你还是直接使用类似于1.5这样的数值吧（淘宝也是这样做的嘛），不要用百分比了。