em单位

解释：em 是最常见的相对长度单位，在 CSS 中，1em 等于当前元素的字号，其准确值取决于作用的元素.（若字号为16px, 则 1em = 16px）

这么说你可能不怎么明白，举个简单的例子就懂了：

<!-- 假如我有一段文字 -->
<body>
  <div class="padded">
    We have built partnerships with small farms around the world to
    hand-select beans at the peak of season. We then carefully roast in small batches to maximize their potential.
  </div>
</body>
<!--样式设置为：-->
<style>
  .padded {
    font-size: 14px;    //设置当前字号为14
    padding: 4em;       // 4em = 4 * 14px
    background-color: aqua;
  }
  </style>

我把文字内边距设为4em，就意味着内边距将会是当前字号的4倍，即4em = 4 * 14px = 56px。我们有F12来验证，果然是这样！！

如果没有指定字号的话，字号会通过继承来确定，浏览器的默认字号为16px.

rem 单位

解释：rem是 'root em'的缩写，root即为根，一个页面的根就是<html>根节点，。它下面是<head>和<body>子节点，所以，1rem 就是根节点指定的字号大小。

例子

我们把上述代码的style做一个简单的增加,我们指定根节点的字号大小为15px，那么，1rem=15px

  <style>
  :root {
    font-size: 15px;   //指定根节点的字号大小为15px
  }
  .padded {
    font-size: 14px;
    padding: 4rem;    //此时，4rem = 60px
    background-color: aqua;
  }
  </style>

同样，我们用F12一看便知:

当然了，存在即合理，我们要在适当的场景用适当的单位，我一般会用 rem 设置字号，用 px 设置边框，用 em 设置其他大部分属性，尤其是内边距、外边距和圆角（不过我有时用百分比设置容器宽度）。

CSS的相对单位：em与rem

em单位

rem 单位

例子