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

所以,文本单行占据的高度不是font-size
来决定的,而是由line-height
来决定的。
line-height的写法
关键词
line-height: normal;
取决于用户端。桌面浏览器(包括Firefox)使用默认值,约为1.2
,这取决于元素的 font-family
。
长度px、em
<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介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!