【CSS】em单位的理解

1、em单位的定义

MDN的解释:它是相对于父元素的字体大小的一个单位。

例如:父元素font-size:16px;子元素的font-size:2em(也就是32px)

注:有一个误区,虽然他是一个相对单位,并且官方对它的解释是相对于父元素字体大小的一个单位,但是它是放在了文字属性里面,也就说只有子元素的font-size是起作用的,子元素的其他的属性是不相对于父元素的,而是相对于本身的font-size大小

2、举例证明

大家可以拿这段代码验证一下

javascript 复制代码
<style>
  .div {
    display: inline-block;
    font-size: 16px;
  }
  .red {
    font-size: 2em; // 32px
    padding: 1em; // 32px
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 100px;
  }
</style>

<div class="div">
  <div class="red">123</div>
</div>
相关推荐
遂心_2 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
溯水流光3 分钟前
React 源码解析
前端
睡不着先生4 分钟前
CSS `:has()` 实战指南:让 CSS 拥有“if 逻辑”
css
光影少年6 分钟前
Typescript工具类型
前端·typescript·掘金·金石计划
北风GI10 分钟前
如何在 vue3+vite 中使用 Element-plus 实现 自定义主题 多主题切换
前端
月亮慢慢圆10 分钟前
网络监控状态
前端
_AaronWong16 分钟前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
Doris_202317 分钟前
Python条件判断语句 if、elif 、else
前端·后端·python
Doris_202322 分钟前
Python 模式匹配match case
前端·后端·python
森林的尽头是阳光35 分钟前
vue防抖节流,全局定义,使用
前端·javascript·vue.js