[分享]css中1em多长

CSS 中的 1em 代表一种相对的长度单位。其长度也是相对于字体大小而定的，通常等于当前字体大小。由于不同的浏览器和操作系统可能会对字体渲染方式和字体大小有所不同，因此相对单位成为网页设计中不可或缺...

CSS 中的 1em 代表一种相对的长度单位。其长度也是相对于字体大小而定的，通常等于当前字体大小。由于不同的浏览器和操作系统可能会对字体渲染方式和字体大小有所不同，因此相对单位成为网页设计中不可或缺的一种单位。

 p{
        font-size: 16px; 
        line-height: 1.5em;
    } 

在上面的代码中，我们先给 p 元素设置了一个字体大小为 16px。当我们设置 line-height: 1.5em 的时候，由于 1em 等于 16px，所以行高就会被设置为 24px（也就是 1.5em * 16px）。这样就可以让我们的文字排版看起来更加舒适。

需要注意的是，1em 的大小会根据其所处的元素而定。如果我们在一个 div 中使用 1em，其大小将取决于该 div 中定义的字体大小。如果我们将这个 div 嵌套到另一个 div 中，那么内部 div 中的 1em 将基于外部 div 定义的字体大小。

 div {
        font-size: 20px;
    }
    div p {
        font-size: 1em; /* 字体大小为父元素的大小，即20px */
    } 

以上代码中，我们在外层的 div 中设置了字体大小为 20px。在内部的 p 元素中，我们使用 1em 作为字体大小，因此其大小将基于外层 div 的字体大小而定，也就是 20px。