css中line-height属性各个单位详解

yalewoo 最后修改于 2014-09-22 发表于 2014-08-28 3,239 views 0

Web css

我们都知道css中line-height属性用于调整行高，它的值有一些不同的单位，本文将详细介绍这些单位的作用和一些区别。

语法规则如下

line-height: normal | <number> | <length> | <percentage>

如果子元素没有指定行高，那么将默认继承父元素的行高，继承的时候父元素行高带单位和不带单位有一些区别。

为了方便，下面效果中我设置了背景颜色，以便观察行高到底是多少

1. normal

设置值为normal时行高根据浏览器默认决定，不同浏览器可能有不同的值。

2. 使用单位px

使用px单位表示行高为多少像素

<div style="font-size: 20px;
		line-height: 20px;">
			<p style="background: orange;">我是父元素 字体大小20px 行高25px</p>
			<div style="font-size:30px
			">
				<p style="background: green;">我是子元素的内容 字体大小30px 行高继承了父元素行高25px</p>
			</div>
		</div>

<div style="font-size: 20px;

line-height: 20px;">

<p style="background: orange;">我是父元素字体大小20px 行高25px</p>

<div style="font-size:30px

<p style="background: green;">我是子元素的内容字体大小30px 行高继承了父元素行高25px</p>

</div>

我是父元素字体大小20px 行高25px

我是子元素字体30px 行高继承父元素行高25px

3. 使用百分数或em单位

120%和1.2em效果完全相同。如果某个元素设置行高为1.5em，它的行高就是 1.5乘以它的字体大小

我字体大小20px,行高1.5em 算出值就是20*1.5为30px

如果上面这个例子行高1.5em 其实它的行高是30px

如果他有子元素，子元素继承的行高是它计算后的行高30px

我是父元素字体大小20px 行高150% 计算后30px

我是子元素字体30px 行高继承父元素行高30px

4. 不带单位

不带单位表示行高为元素字体大小乘以该数字。如果子元素继承父元素的该属性，则只继承了该数字，实际行高由该系数乘以各个元素自己的字体大小而定

我是父元素字体大小20px 行高1.5 计算后30px

我是子元素字体30px 行高继承系数1.5 计算后是45px

总结

由于不带单位的时候只继承了系数，推荐使用这种方式。

雅乐网

计算机技术、学习成长