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。

转载于:https://www.cnblogs.com/aobingyan/p/3898302.html

line-height:2和line-height:2em的区别，它们是有区别的相关推荐

simplejson.scanner.JSONDecodeError: Extra data: line 1 column 22089 - line 1 column 22090
我的代码 page = requests.get("http://www.sogou.com/kmap?query=%E9%99%88%E5%A5%95%E8%BF%85&from= ...
height、clientHeight、scrollHeight、offsetHeight区别
我们来实现test中的onclick事件 function justAtest(){var test= document.getElementById("test");var te ...
jQuery height()、innerHeight()、outerHeight()函数的区别详解
参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): 1 <!DOCTYPE html> 2 <html lan ...
html height 100%无效,css height:100%撑不起来怎么解决？
css height:100%撑不起来怎么解决?下面本篇文章居来给大家介绍一下解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css height:100%撑不起来的解决方 ...
libtool: line 454 CDPATH libtool: line 1132: func_opt_split: : command not found
编译cacti-spine-0.8.8a源代码,在make时出现如下错误: ../../libtool: line 454: CDPATH: command not found ../../libto ...
H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
Bug整理——$(window).height()获取到$(document).height()的问题
想看解决方案不想看无聊乏味的bug解决过程的同学,请直接跳转到页面底部~ 今天在做项目的过程中遇到了一个BUG,项目中需要获取到浏览器客户区的高度以方便做一些适应性调整,代码如下: $(documen ...
android:layout_height、android:layout_width、android:height、android:width的关系与区别
一直一来对android:layout_height.android:layout_width.android:height.android:width这几个属性的关系有些不理解,既然有了androi ...
华为line服务器无响应,line注册链接不到服务器
line注册链接不到服务器内容精选换一换安全组是一个逻辑上的分组,为同一个虚拟私有云内具有相同安全保护需求,并相互信任的弹性云服务器.云堡垒机等提供访问策略.为了保障云堡垒机的安全性和稳定性,在 ...

line-height:2和line-height:2em的区别，它们是有区别的

line-height:2和line-height:2em的区别，它们是有区别的相关推荐

最新文章

热门文章