【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>
相关推荐
朕的剑还未配妥11 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼15 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
携欢18 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33026 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦27 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
qq_18417767735 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost36 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
C2X1 小时前
Vue3.0 学习总结
前端
小小前端_我自坚强1 小时前
Tailwind CSS 详解
css·程序员·开源
汤姆Tom1 小时前
CSS 新特性与未来趋势
前端·css·面试