CSS em与rem单位

在使用CSS属性设置元素大小时，你可能注意到有两个选项，一个是绝对单位，另一个是相对单位。绝对单位是固定的，大小可以使用cm、mm、px来设置。另一方面，相对单位相对于其他某个元素，可以是父元素或任何其他元素。

在本教程中，我们将比较CSS中em单位和rem单位。

Em单位

em单位使得可以改变其字体大小相对于其父元素的大小的元素的大小。这意味着如果父元素的大小发生变化，子元素的大小也会发生变化。

让我们通过一个示例来理解em单位的作用。

示例

在这个示例中，我们将改变子元素的字体大小为 35px ，子元素的外边距也将改变为 50px 。

在这里，我们首先创建了一个父元素，然后将其大小设置为17.5px，子元素的字体大小设置为1em，这意味着子元素的字体大小将是父元素的两倍，元素的外边距将保持不变。让我们看一下代码的输出。

注意 − 使用font-size属性时要注意。当在其他属性上使用时，font-size相对于父元素。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Difference between em and rem</title>
   <style>
      .father {
         paddding: 0px;
         font-size: 16px;
      }
      .son {
         margin: 1em;
         font-size: 1em;
      }
   </style>
</head>
<body>
   <div class="father">
      This is the Father element
      <div class="son">
         This is Son element
      </div>
   </div>
</body>
</html>

在上述输出中有一个父元素和一个子元素。子元素的大小在输出中显示与父元素相同。

rem 单位

rem 单位相对于元素根部分的字体大小，也就是html元素。如果没有指定字体大小，则使用浏览器的默认值，不考虑父元素，只考虑根元素。

示例

我们将保持子元素的字体大小为50px，然后将元素的边距设置为40px。rem 单位的大小将相对于所有声明而不是 em 单位。

在以下示例中，我们首先使用根元素，然后创建了一个父元素和一个子元素。然后，我们将根元素的字体大小设置为18px，将父元素的字体大小设置为15px。然后，将子元素的字体大小设置为1.5rem，表示是根元素的两倍，而不是父元素的两倍。让我们看一下输出来了解 rem 单位的用途。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>The difference between em and rem units</title>
   <style>
      html {
         font-size: 18px;
      }
      .son {
         font-size: 2rem;
         margin: 1.5rem;
      }
      .father {
         font-size: 13px;
      }
   </style>
</head>
<body>
   <div class="father">
      This is parent
      <div class="son">
         This is Child in rem unit system
      </div>
   </div>
</body>
</html>

你可以在上面的输出中看到，子元素不是父元素的两倍，而是根元素的两倍。

单位 em 相对于最近父元素的字体大小，它可能导致复合效应。单位 rem 相对于 HTML 根字体大小，但不会导致复合效应。