一直有人搞不明白line-height:2和line-height:2em的区别，因为他们不知道或者还没遇到过这类的问题或者差异。
line-height:2是2倍的意思，如果内部有不同大小文字的情况下，以最大文字为倍数。
line-height:2em也是2倍文字大小的意思，但如果内部有大文字，它还是会以父容器的大小来计算。
请看如下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>line-height:2和line-height:2em的区别，它们是有区别的</title>
<style type="text/css">
* { margin: 0; padding: 0; }
h2 { margin: 30px 0; }
body { font-size: 14px; }
.lh2 { line-height: 2; }
.lh2em { line-height: 2em; }
span { font-size: 60px; }
</style>
</head>
<body>
<div style="width:300px;">
<h2>line-height:2</h2>
<div class="lh2">我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高<span>我是大文字</span>我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高</div>
<h2>line-height:2em</h2>
<div class="lh2em">我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高<span>我是大文字</span>我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高我是行高</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/zhp404/articles/3784396.html