图解line-height的使用

line-height是什么

line-height属性用于设置行间的距离（行高），行高指的是字母的大小(font-size)和字母的上下边缘(字母大小 + 上下空白)。

所以，文本单行占据的高度不是font-size来决定的，而是由line-height来决定的。

line-height: normal;

取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family。

<p>udemy</p>

p{
 font-size:20px;
 line-height:30px;
}

字母的大小(font-size)是20 px，line- height 是30 px，上下留白为5px。

<p>udemy</p>

p{
 font-size:20px;
 line-height:2;
}

line- height 为font-size: 20 px 的2倍（20 × 2= 40 px），字母的大小(font-size)是20 px，上下留白为10px。

<p>udemy</p>

p{
 font-size:20px;
 line-height:200%;
}

line- height 为 font-size: 20 px 的200% ，为40 px，同样上下留白为10px。。

PS：line-height可继承，给元素设置line-height会对其内部所有的孩子都生效

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。