浅谈lineheight

最新推荐文章于 2024-05-22 16:28:54 发布

Eric Coper

最新推荐文章于 2024-05-22 16:28:54 发布

阅读量135

点赞数 1

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_51644864/article/details/115980631

版权

浅谈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>