px 与 em 单位区别

CSS 中 px 和 em 单位的使用场景与换算方式

问题

CSS 中 px 和 em 有什么区别？各自适合什么场景？

解答

px - 绝对单位

px 是固定像素值，不会随其他元素变化。

.box {
  width: 200px;
  font-size: 16px;
  padding: 10px;
}

em - 相对单位

em 相对于当前元素的 font-size 计算。如果用于 font-size 属性本身，则相对于父元素的 font-size。

<div class="parent">
  <div class="child">文字内容</div>
</div>

.parent {
  font-size: 16px;
}

.child {
  /* font-size 相对于父元素：16px * 1.5 = 24px */
  font-size: 1.5em;
  
  /* padding 相对于当前元素的 font-size：24px * 2 = 48px */
  padding: 2em;
}

嵌套问题

em 会产生嵌套累积：

/* 每层嵌套都会累积计算 */
.level1 { font-size: 1.2em; }  /* 假设根 16px → 19.2px */
.level2 { font-size: 1.2em; }  /* 19.2px * 1.2 = 23.04px */
.level3 { font-size: 1.2em; }  /* 23.04px * 1.2 = 27.65px */

rem - 解决嵌套问题

rem 始终相对于根元素（<html>）的 font-size：

html {
  font-size: 16px;
}

.box {
  font-size: 1.5rem;  /* 始终是 24px */
  padding: 2rem;      /* 始终是 32px */
}

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    html { font-size: 16px; }
    
    .px-box {
      font-size: 20px;
      padding: 10px;
      border: 1px solid blue;
    }
    
    .em-box {
      font-size: 1.25em;    /* 父元素 16px * 1.25 = 20px */
      padding: 0.5em;       /* 当前 20px * 0.5 = 10px */
      border: 1px solid green;
    }
    
    .rem-box {
      font-size: 1.25rem;   /* 根元素 16px * 1.25 = 20px */
      padding: 0.5rem;      /* 根元素 16px * 0.5 = 8px */
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="px-box">px 单位</div>
  <div class="em-box">em 单位</div>
  <div class="rem-box">rem 单位</div>
</body>
</html>

关键点

px 是绝对单位，值固定不变
em 相对于当前元素的 font-size，用于 font-size 属性时相对于父元素
em 嵌套会累积计算，容易失控
rem 始终相对于根元素，避免嵌套问题
响应式布局推荐 rem，组件内部间距可用 em