padding和margin改变会触发重排；应优先用transform替代margin位移，用clamp实现响应式padding，统一box-sizing为border-box，并注意absolute子元素定位基准不变。
padding 和 margin 的改变会直接触发重排（reflow）
浏览器渲染时，padding 和 margin 属于盒模型中影响元素几何尺寸的属性。只要它们的值发生变化，浏览器就必须重新计算该元素及其后代、兄弟甚至祖先元素的布局位置——这个过程叫重排。频繁修改会导致明显卡顿，尤其在滚动或动画中。
- 用
transform: translate()替代margin-top实现位移，避免重排 -
padding改变会直接影响offsetWidth/Height，若 JS 依赖这些值做后续计算，需注意时机（如放在requestAnimationFrame中） - 媒体查询中修改
padding或margin是安全的，因为只在断点触发，不连续执行
响应式中 padding 常用于“视觉留白自适应”，而非单纯撑开空间
移动端小屏下，过大的 padding 会挤压内容；桌面端大屏下，过小又显得局促。直接写死像素值（如 padding: 20px）无法适配。更合理的做法是结合相对单位与视口约束。
- 用
padding: clamp(8px, 4vw, 24px)：最小 8px，随视口线性增长，上限 24px - 避免在 flex 容器子项上同时用
margin和gap，后者更可控且不触发重排 - 横向 padding 推荐用
padding-inline，兼容 RTL 布局，比padding-left/padding-right更语义化
margin 负值在响应式中容易引发意外重叠和塌陷
负 margin 常被用来微调对齐或实现“吸顶”“吸底”效果，但它会破坏文档流正常边界，尤其在 flex/grid 容器中行为不一致。
- 在
display: grid容器里，负margin不会影响网格轨道大小，但可能让子项溢出容器而不触发滚动 - 父元素有
overflow: hidden时，负margin拉出的内容会被裁剪，且无法通过scroll-margin补救 - 用
margin-top: -1em对齐文字基线？优先考虑align-self: baseline或vertical-align（针对 inline 元素）
盒模型切换（box-sizing）必须全局统一
如果部分组件用 box-sizing: content-box（默认），另一些用 box-sizing: border-box，动态调整 padding 时，实际占用宽度会不一致，导致响应式断点错位。
立即学习“前端免费学习笔记（深入）”；
- 项目初始化就应设置
* { box-sizing: border-box }，包括伪元素：*::before, *::after - 第三方 UI 库（如 Bootstrap）通常已设好，但自定义组件若重置了
box-sizing，要特别检查 - 用
calc()计算宽度时（如width: calc(100% - 2rem)），前提是父容器 padding 已被border-box归入尺寸内，否则结果不可控
实际开发中最容易忽略的是：动态改 padding 后，若元素内有 position: absolute 子元素，其 top: 0 仍以 content box 为基准，不会随 padding 变化自动偏移——这需要手动同步修正或改用 inset。
