CSS中transition不支持padding和margin的独立属性，仅能对数值型长度值（如px、rem）进行平滑过渡；需显式声明具体属性如padding-top或margin-bottom，避免使用transition: all，并优先用transform替代margin以减少重排。
transition 不支持 padding 和 margin 的独立属性
CSS 本身没有 transition-padding 或 transition-margin 这样的属性——它们根本不存在。直接写 transition: padding 0.3s ease; 看似合理，但实际能生效，**仅因为 padding 是可动画的 CSS 属性**，而非存在某个专用过渡开关。
哪些 padding/margin 相关值可以被 transition 动画
只有数值型、可插值的长度值才能平滑过渡，比如：
-
padding: 10px→padding: 20px✅ -
margin: 0→margin: 1rem✅（单位需兼容，px和rem混用会失败） -
padding-top: 5px→padding-top: 15px✅（单边更可控） -
padding: 10px 20px→padding: 10px 30px 20px❌（声明结构不一致，浏览器放弃插值） -
margin: auto→margin: 10px❌（auto无法计算中间状态）
实际写法：用 transition 配合具体属性名
正确写法是显式列出要过渡的属性，例如：
.box {
padding: 12px 16px;
margin-bottom: 8px;
transition: padding 0.2s ease, margin-bottom 0.2s ease;
}
.box:hover {
padding: 16px 24px;
margin-bottom: 16px;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
- 避免写
transition: all 0.2s—— 它会强行尝试过渡所有变化属性（包括display、height等不可动画项），导致性能抖动或意外行为 - 如果只动一边（如只改
padding-top），就只写transition: padding-top 0.2s，更精准也更省资源 - 使用
em或rem时，确保父级字体大小稳定；否则相对单位动画会因基准变动而“跳变”
margin 动画容易引发布局重排，需要特别小心
margin 变化会触发浏览器重新计算元素位置和周围流式布局，频繁过渡可能卡顿。常见规避方式：
- 优先用
transform: translateY()替代margin-top实现“视觉位移”，它不触发重排 - 若必须用
margin，确保过渡时间短（≤ 0.2s）、且只在用户交互明确的场景（如 hover、focus）中启用 - 绝对定位元素的
margin动画影响较小，但要注意top/left通常比margin更合适
真正难处理的不是语法，而是 margin 改变后连带引发的兄弟元素重绘、行高塌陷、flex/grid 重新分配空间——这些副作用往往比过渡本身更值得花时间诊断。
