em 的参照物是「自己」的 font-size：.box { font-size: 14px } 里 1em = 14px；用在 padding 上也按自己的 14px 算。嵌套时 em 会层层放大——列表里再套列表，1.2em 用三次变成 1.73 倍，经典「越缩越大」bug。
rem 只锚定 html（默认 16px），全站一致：改一个 :root font-size，所有 rem 元素等比缩放，这正是移动端 rem 适配方案的原理。实战口诀：字号/间距用 rem 保证一致性与可缩放，组件内部比例用 em 让组件自带节奏。
<style> html { font-size: 16px; } .card { font-size: 14px; padding: 1em; border-radius: .5em; background: #21262d; color: #e6edf3; margin-bottom: 8px; } .big { font-size: 20px; } /* padding 自动放大到 20px：em 跟着字号走 */ .rem-box { padding: 1rem; background: #4a9eff33; } </style> <div class="card">普通卡（padding 14px）</div> <div class="card big">大字卡（padding 自动变 20px）</div> <div class="rem-box">rem 盒（padding 锚定根 16px，与卡片无关）</div>