line-height属性总结

时间:2023-03-09 09:35:23
line-height属性总结
 line-height属性的继承性:
子元素不设置line-height时,
在父元上设置带单位的值和百分比时会先计算父元素的line-height大小然后继承过来,在父元素上设置无单位的数值时,子元素会继承这个值,然后将这个值乘以子元素的font-size,得到line-height
line-height为normal时:
normal的情况为默认值,浏览器会计算出“合适”的行高,多数浏览器(Georgia字体下)取值为1.14,即为font-size的1.14倍,如果未设定font-size,那既是基准值16px的1.14倍
单独讨论这个取值是没什么意义的,因为normal和具体的数值相比,会因为字体的不同而不同
如果是项目需要,还是给定一个值好一些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> </style>
</head>
<body>
<div class="lh1">
<p>行高1</p>
</div> <div class="lh2">
<p>行高2</p>
</div> <div class="lh3">
<p>行高3</p>
</div>
</body>
</html>
        .lh1{
font-size: 20px;
line-height: 2em;
background: red;
}
.lh2{
font-size: 20px;
line-height:;
background: green;
}
.lh3{
font-size: 20px;
line-height: 200%;
background: blue;
}
p{font-size:12px;}

结果:

line-height属性总结