网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于css中em是相对于父元素还是当前元素的大小？（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
em是CSS中一个比较常用的相对单位，因此有必要注意一些坑点。
1em等于当前元素的字体大小，除非你在设置font-size
有很多文章说1em是等于父元素的字体大小！这种说法实际上是不准确的。看以下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-size: 16px;
}
div {
font-size: 32px;
padding-bottom: 2em;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html><div>会被padding-bottom撑开，而padding-bottom的高度是64px，而不是32px！这证明了1em等于当前元素的字体大小（只有一个例外，下面会讲）。
字体大小和长度有什么关系呢？字体不是一个方块吗？实际上，字体大小被定义为M的宽度。为什么有人误认为1em等于父元素的字体大小呢？这是因为如果在设置font-size的时候使用em单位，此时font-size还是默认值inherit，因此此时1em还等于父元素的字体大小。这是在设置font-size时才有的特例！这个特例很好理解，毕竟我正在设置当前元素的字体大小呢！怎么能用此刻正在设置的字体大小作为单位呢！这不是悖论吗！
举个例子，如果这个悖论真的发生了，就会出现以下情况：水果店老板对你说：“你要多少斤橘子，我给你装起来”，而你却对老板说：“我要的数量是我最终要的数量的2倍”（类比于设置font-size: 2em）。这个时候水果店老板估计就要崩溃了，他到底要给你装多少橘子呢？