浅谈line-height
大家都知道line-height有五个值(如下)
.height{
line-height: 10px;
line-height: 5em;
line-height: 200%;
line-height: 1.5;
line-height: normal;
}
但在平时对css文件中,我们一般都会用line-height:1.5这个形式来进行初始化,你知道是为什么吗?
为什么用该形式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
<style >
body{
font-size: 14px;
line-height: 1.5;
}
h3,p{
margin: 0;
}
h3{
font-size: 30px;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h3>张家辉</h3>
<p>帅</p>
</body>
</html>
这就是用了该形式的效果,其h3和p都继承了父元素的特性,p的line-height为201.5 = 30px;h3的line-height为301.5 = 45px;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
<style >
body{
font-size: 14px;
line-height: 150%;
}
h3,p{
margin: 0;
}
h3{
font-size: 32px;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h3>张家辉</h3>
<p>帅</p>
</body>
</html>
但这样的就会发生变化,其h3和p的line-height都会变成14*1.5=21px;其子元素都会变成21px,这是两者的继承形式的不同。
(以上纯属小白的学习笔记,如有错误,还望各位大佬不吝赐教)