css中em是什么单位？em与px有什么区别及如何使用

在CSS中，em是一个相对长度单位，它不像px那样代表屏幕上一个固定的物理像素点，而是相对于当前元素的字体大小来计算的。简单说，如果某个元素的font-size是16px，那么1em就等于16px，2em就是32px。这个特性让em在字号缩放、组件尺寸联动等场景中表现出色，但同时也因为继承和叠加的问题让不少初学者感到困惑。本文将从em的基本定义出发，逐步讲解它的计算规则、与rem的区别以及实际使用技巧。

em单位的定义与计算规则

根据W3C规范的定义，em表示的是元素的font-size属性的计算值。当em用在font-size属性本身时，它参照的是父元素的字体大小；而当em用在width、padding、margin等其他属性上时，它参照的是当前元素自身的字体大小。这个细微的区别是理解em的关键，也是很多问题的根源。

举个具体的例子。假设浏览器默认字号是16px，我们有这样一段CSS：

.parent {
    font-size: 20px;
}
.child {
    font-size: 1.5em; /* 20px * 1.5 = 30px */
    padding: 1em;     /* 30px * 1 = 30px，参照自身字号 */
    width: 10em;      /* 30px * 10 = 300px */
}

可以看到，.child的字号先根据父元素计算得到30px，随后它的padding和width又基于这个30px来计算。这种链式的参照关系使得em非常适合构建"尺寸随字号一起缩放"的组件——字号变大，整个组件的内边距和宽度也会按比例放大。

需要注意的是，em存在叠加效应。如果多层嵌套的元素都使用em设置字号，实际的像素值会被层层放大或缩小：

.level1 { font-size: 1.2em; } /* 16 * 1.2 = 19.2px */
.level2 { font-size: 1.2em; } /* 19.2 * 1.2 = 23.04px */
.level3 { font-size: 1.2em; } /* 23.04 * 1.2 = 27.65px */

原本以为放大1.2倍，三层嵌套之后实际放大到了1.7倍多，这就是em叠加带来的意外效果。在使用嵌套列表、嵌套评论等结构时要特别小心这一点。

em与rem的区别及选择建议

CSS3引入了rem（root em）单位，它与em的区别在于参照对象不同：rem始终相对于根元素，也就是<html>元素的字号来计算，不受父元素影响。而em的参照对象会根据使用位置在父元素和自身之间切换。这个差异决定了两者的适用场景。

两者对比可以看下表：

在实际项目中，一个常见的推荐做法是：全局层面使用rem控制整体布局和间距，组件内部使用em实现元素尺寸与字号的联动。比如一个按钮组件，字号变了，内边距和圆角也跟着变：

.btn {
    font-size: 1rem;      /* 字号跟随全局 */
    padding: 0.5em 1em;   /* 内边距随字号缩放 */
    border-radius: 0.25em;
    border: 1px solid #ccc;
}
.btn-lg { font-size: 1.25rem; } /* 加大字号后，内边距自动变大 */

这样写的好处是只需要调整一个字号，整个组件的比例关系都保持不变，维护成本大大降低。

em单位的使用场景与常见踩坑

em最典型的应用场景是字号联动。例如新闻网站的文章正文，可以在容器上统一设置字号，内部的标题、段落、行高等都用em表示，用户调整浏览器字号或者开发者修改容器字号时，内部所有元素的比例自动保持一致：

.article { font-size: 16px; }
.article h2 { font-size: 1.75em; margin: 0.8em 0; }
.article p  { font-size: 1em; line-height: 1.6; text-indent: 2em; }
.article blockquote { font-size: 0.9em; color: #666; }

其中text-indent: 2em实现首行缩进两个字符的效果，是中文排版中em的经典用法，比写死32px要灵活得多。

第一个常见的坑是前面提到的嵌套叠加问题。典型的场景是多层导航菜单，每一级菜单都写了font-size: 0.9em，结果三四层之后字号小得几乎看不见。解决办法是每一级都用rem或者明确的px重置字号，只在需要联动的属性上使用em。

第二个坑是在font-size和其他属性上同时使用em时混淆参照对象。比如给元素写font-size: 1.5em; padding: 1.5em;，padding参照的是计算后的自身字号而不是父元素字号，如果误以为两者都基于父元素，得到的尺寸就会和预期不符。理解"font-size上的em看父级，其他属性上的em看自身"这条规则，可以避开绝大多数计算错误。

第三个坑是浏览器默认字号的影响。em的计算基础最终来自根元素的字号，而用户可能在自己的浏览器中修改了默认字号。这既是em的优势——尊重用户的字号偏好，提升可访问性；也可能导致页面布局与设计稿有细微出入。因此使用em时建议配合弹性布局，避免固定像素的宽度和em混用导致的排版问题。

总结一下，em是一个相对于字体大小的弹性单位，核心规则是1em等于当前元素的font-size值，用在font-size属性上时参照父元素。掌握好它的计算规则和叠加特性，在组件化开发中合理搭配rem使用，就能写出缩放自如、易于维护的样式代码。

css em单位em与px区别响应式单位修改时间：2026-09-11 15:44:35