1em等于当前元素继承的父元素计算后font-size值，非声明值；如父元素font-size为1.2rem，则子元素2em=父元素渲染字号×2；用em时需确保父级字号稳定且显式设置，避免嵌套漂移。
em单位怎么算，和父元素字体大小什么关系
em是相对单位，1em = 当前元素的font-size计算值。但注意：**它不是继承父元素的font-size声明值，而是继承计算后的值**。比如父元素设了font-size: 1.2rem，子元素用width: 2em，那2em就等于父元素最终渲染出的字体大小 × 2。
常见错误现象：div { font-size: 14px; } span { font-size: 0.8em; } → 本意想设11.2px，结果却得到14px × 0.8 = 11.2px；但如果父div本身font-size是1.5em（来自更上层），那就得层层回溯计算——容易算错、难维护。
- 用
em做尺寸时，务必确认父级font-size是否稳定、是否被重置过 - 避免在多层嵌套组件里混用
em和rem，容易导致尺寸“漂移” - 如果父元素
font-size为0或inherit且上游未定义，em会失效（变成0或触发浏览器默认）
按钮组件用em控制宽高和内边距的实际写法
适合用em的地方，是那些需要随文本缩放同步变化的尺寸：比如按钮的padding、border-radius、图标容器宽高。这样用户放大字体时，按钮依然保持视觉比例协调。
示例：
立即学习“前端免费学习笔记（深入）”；
button { font-size: 16px; padding: 0.5em 1em; /* 等效于 8px 16px */ border-radius: 0.25em; /* 等效于 4px */ min-width: 6em; /* 宽度随字号等比伸缩 */ }- 不要对
font-size本身用em来设（除非你真想让它相对父级字号缩放） -
line-height用无单位数值更安全，用em反而可能引发意外行高叠加 - 当按钮内含SVG图标时，图标
width/height也建议用em，和文字对齐更自然
em和rem在组件库里的分工建议
在局部响应式场景下，em管“内部比例”，rem管“全局基准”。比如一个卡片组件，根字体用rem控制整体缩放级别，卡片内部间距、字体、圆角全用em——这样既支持全局适配（如媒体查询改html { font-size }），又保证卡片内部结构不因嵌套而变形。
- 组件根节点建议显式设置
font-size（如font-size: 1rem），切断上游干扰 - 若组件被插入到
font-size: 0的容器中（某些ui框架清空列表项默认间距时会这么干），所有em都会归零——必须加font-size: 1rem兜底 - 用
em做margin时，垂直方向慎用，否则可能受行高或相邻元素影响产生意外空白
调试em尺寸最有效的两个方法
浏览器开发者工具里直接看computed值最靠谱，但要注意：Computed面板显示的是最终像素值，而“原始声明值”栏里写的0.75em未必是你以为的那个父级字号。
- 右键检查元素 → “Computed”标签页 → 找
font-size那一行，点开小箭头看来源，确认当前生效的字号从哪来 - 临时加
outline: 1px solid red+font-size: 1em到父容器，快速验证是否被意外重置 - chrome DevTools 的“Layout”侧边栏可实时显示
em换算过程（需开启“Show layout shifts”或使用“Rendering”面板勾选“Em units”）
真正麻烦的从来不是em怎么写，而是当你改了某一层的font-size，十几个用em写的子组件尺寸全乱了——这时候得回头查谁动了那个父级的计算值。