em

date
Mar 9, 2023
slug
deepcss-relative-em
status
Published
tags
深入解析CSS
summary
CSS Relative unit
type
Post
em 是相对长度单位，适合基于特定的字号进行排版。

给不同的元素加上em

<span class="box box-small">Small</span>
<span class="box box-large">Large</span>
.box{
    padding:1em;
    border-radius:1em;
}
.box-small{
    font-size:12px;
}
.box-large{
    font-size:18px;
}
//不同的字号可以决定元素 em 值
​ 这段代码用em定义了一个盒子，同时定义了一个small和一个large的修饰符，分别指定不同的字号。

使用 em 定义字号

font-size根据继承字号来进行计算。
使用相对font-size标记
<body>
    We love coffee
    <p class="slogan"> /*slogan继承的 body 的字号*/
        We love coffee
    </p>
</body>
body{
    font-size: 16px;
}
.slogan{
    //计算结果为元素继承的字号的1.2倍
    font-size:1.2em;
}
​ body 中使用像素单位，slogan 使用 em 来放大字号。slogan 的指定字号是 1.2em。为了得到计算的像素值，需要参考继承的字号，即16px。16*1.2=19.2，所以计算值为19.2px。
​ 提示 如果知道字号的像素值，但是想用 em 声明，可以用一个简单的公式换算：用想 要的像素大小除以父级（继承）的像素字号。比如，想要一个 10px 的字体，元素继承 的字体是 12px，则计算结果是 10/12 = 0.8333em。如果想要一个 16px 的字体，父级字 号为 12px，则计算结果是 16/12 = 1.3333em。

em同时用于字号和其他属性

​ 同时用em指定一个元素的字号和其他属性时，浏览器必须先计算字号，然后使用这个计算值去算出其余的属性值。
body{
    font-size:16px;
}
.slogan{
    font-size:1.2em; // 16 * 1.2 = 19.2px
    padding:1.2em; // 19.2 * 1.2 = 23.04px
    background-color:#ccc;
}
​ 在这个例子里，padding 的声明值为 1.2em，乘以 19.2px（当前元素的字号），得到计算值 为 23.04px。尽管 font-size 和 padding 的声明值相同，计算值却不一样。

© shallrise 2025