em单位本质是相对于直接父元素的font-size，非根元素或固定像素；其值随父级字体动态继承，易因嵌套导致尺寸失真，适用于内边距、行高、图标等需文字缩放同步的场景，布局应优先用rem或%。
em 单位的本质是相对父元素的 font-size
em 不是相对于根元素，也不是固定像素，而是动态继承自直接父元素的 font-size 值。比如父元素设为 font-size: 16px，那么 1em 就等于 16px；如果父元素是 font-size: 1.25em（相对于它自己的父级），那子元素的 1em 就会层层计算——这正是容易出错的地方。
常见错误现象：
— 文字大小在嵌套容器中意外放大或缩小
— margin/padding 在多层嵌套后远超预期
— 使用 em 设置宽高时，尺寸随字体变化而“漂移”
- 只在明确需要跟随文字缩放的场景用
em：比如按钮内边距、图标尺寸、行高（line-height） - 避免用
em控制容器整体布局（如width、max-width），改用rem或% - 若必须用
em做布局，建议在关键父容器上显式重置font-size: 1rem，切断继承链
em 和 rem 的核心区别必须分清
em 是“相对于父”，rem 是“相对于根（:root 或 html 元素）”。很多开发者误以为两者可互换，结果在响应式中出现意料外的缩放叠加。
典型陷阱：
— 把 html { font-size: 16px } 和组件内大量 em 混用，导致媒体查询调整根字号后，所有 em 值二次放大
— 在 CSS 自定义属性中写 --gap: 1em，但该变量被用在深层嵌套里，值已失真
立即学习“前端免费学习笔记（深入）”；
- 全局缩放控制优先用
rem：字体、间距、卡片宽度等 -
em专注局部比例关系：比如button { padding: 0.5em 1em; line-height: 1.5; }，这样按钮内边距和文字始终成比例 - 调试时可用浏览器开发者工具检查 computed 样式里的实际像素值，确认是否符合预期
HTML5 布局中 em 的安全用法示例
在现代 HTML5 页面中，em 最稳妥的角色是“内容内联度量单位”，不是网格或容器单位。下面是一个真实可用的按钮组合写法：
button {
font-size: 1rem; /* 锚定基准，避免继承污染 */
padding: 0.75em 1.25em; /* 内边距随字号等比缩放 */
line-height: 1.4; /* 无单位，本身就是相对于当前 font-size */
border-radius: 0.25em; /* 圆角也随文字缩放，视觉更协调 */
}
button.small {
font-size: 0.875rem; / 缩小文字，所有 em 值自动同比缩小 /
}
注意：
— 所有 em 值都基于按钮自身的 font-size，不依赖外部容器
— line-height 推荐用无单位数值，它内部就是按 em 逻辑计算的
— 不要给 button 外层容器设奇怪的 font-size，否则会污染
响应式中混用 em 和媒体查询的风险
很多人在 @media 查询里用 em 做断点（如 @media (min-width: 40em)），认为这等价于 “640px（假设基础字号 16px）”。但问题在于：这个 40em 是相对于浏览器默认字号，而用户可能修改了浏览器默认字号，或页面设置了 html { font-size: 12px } —— 此时断点实际变成 480px，布局就乱了。
- 媒体查询断点统一用
rem或px，确保稳定：比如@media (min-width: 40rem)（前提是根字号固定） - 如果必须支持用户自定义字号，断点用
px更可靠，因为它是绝对设备像素 - 不要用
em写容器宽度，例如main { width: 60em; }—— 这会让主内容区随用户字体设置剧烈伸缩，破坏阅读体验
真正难处理的从来不是怎么写，而是搞清每一处 em 的“参照物”是谁。一旦父级 font-size 来自继承、CSS 变量、JS 动态设置或用户代理样式，它的值就不再可控。
