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>

 

所以这里要针对情况来处理，建议使用2，而不是2em。

posted @ 2014-08-07 23:15  madwoman  阅读(1268)  评论(0)  编辑  收藏  举报