CSS em - 绿叶网

CSS em 是什么？

在 CSS 中，em 是一个相对单位，它是相对于 “当前元素” 的字体大小而言的。其中，1em 就等于 “当前元素” 字体大小。

这里的字体大小指的是以 px 为单位的 font-size 值。例如，当前元素的 font-size 值为 10px，则 1em 等于 10px；当前元素的 font-size 值为 20px，则 1em 等于 20px，以此类推。

需要注意的是，如果当前元素的 font-size 没有定义，则当前元素会继承父元素的 font-size。如果当前元素的所有祖先元素都没有定义 font-size，则当前元素会继承浏览器默认的 font-size。

提示: 所有浏览器默认的 font-size 值都是 16px。

使用 em 作为单位，有以下 2 个优点：

可伸缩性：em 单位可以根据当前元素的字体大小来自动调整大小，非常适合用于创建响应式布局。
保持比例：使用 em 单位可以确保元素之间比例保持一致。即使更改了字体大小，与字体大小 “挂钩” 的其他尺寸（如 width、margin 等）也会随之调整。

不过 em 单位也有以下缺点。

依赖于父元素字体大小：em 单位的大小取决于当前元素的父元素字体大小。如果更改了父元素的字体大小，则子元素的 em 值也会相应更改。
容易累积放大：在某些情况下，使用 em 单位可能会导致布局问题，如元素之间的间距可能不一致。例如，在多层嵌套的元素中使用 em 单位设置字体大小时，那么字体大小会逐层累积，可能导致最终的字体大小超出预期，从而影响布局。

提示: 如果想要创建响应式布局，我们更多的是使用 rem 单位，而不是 em 单位。rem 单位是相对于根元素（html 元素）的字体大小而言的，可以避免 em 单位的字体大小累积问题，更易于控制和维护。

CSS em 的使用技巧

在实际开发中，rem 单位比 em 单位更有用。不过 em 也有以下 2 个常见的使用场景。

首行缩进使用 em 单位。
字体大小使用 em 单位。

1. 首行缩进使用 em 单位

在中文页面设计中，有时想要设置段落首行缩进 2 个汉字的间距。如果要实现这个效果，text-indent 值应该是 font-size 值的 2 倍。此时，我们使用 text-indent: 2em 就可以轻松实现。

示例：text-indent: 2em; 实现首行缩进

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            font-size: 14px;
            text-indent: 2em;
            width: 360px;
        }
    </style>
</head>
<body>
     <h3>爱莲说</h3>
     <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
     <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人 ? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

页面效果如下图所示。

em 作为 CSS 单位

分析：

在这个例子中，text-indent: 2em; 等价于 text-indent: 28px;。对于首行缩进，使用 em 作为单位会比使用 px 作为单位更好。为什么呢？

因为使用 px 作为单位，如果我们定义 font-size 为 14px 时，则 text-indent 就应该定义为 28px；如果我们定义 font-size 为 15px 时，则 text-indent 就应该定义为 30px，以此类推……

但当使用 em 作为单位时，不管 font-size 定义为多少 px，我们只需要将 text-indent 定义为 2em 即可。不需要计算，相对来说更加的方便。

2. 字体大小使用 em 单位

对于一个页面的字体大小，使用 px 作为单位时可扩展性可能不好，使用百分比作为单位时也不符合习惯，最佳选择是使用 em 作为单位来定义字体大小。

使用 em 作为单位，当需要改变页面整体的文字大小时，我们只需要改变根元素字体大小即可，工作量变得非常少。em 这个特点在跨平台网站开发中有比较大的优势。

3. 行间距使用 em 单位

em 单位还可以用于设置行间距，例如：

p {
    font-size: 16px;
    line-height: 1.5em;     /* 设置行间距为字体大小的 1.5 倍 */
}

通过上面这样设置，可以使得行间距与字体大小保持比例，文本的垂直排版更加美观协调。