padding控制组件内部留白，margin控制组件之间距离；必须统一启用box-sizing: border-box，否则width: 200px加padding和border会导致实际宽度超出（如228px），引发布局错位；二者语义不可互换，且需配合gap或BFC避免margin折叠。
直接结论：用 padding 控制组件内部留白，用 margin 控制组件之间距离，但必须统一启用 box-sizing: border-box，否则宽度计算会失控。
为什么 width: 200px 的组件实际占了 228px？
这是默认盒模型（box-sizing: content-box）的必然结果。浏览器把 width 当作纯内容区宽度，再额外叠加 padding 和 border。比如：
.card {
width: 200px;
padding: 12px;
border: 2px solid #333;
}它的总占用宽度是 200 + 12×2 + 2×2 = 228px。这在组件库或栅格系统里极易导致换行错位、对不齐等问题。
- 所有组件级 CSS 应前置重置：
* { box-sizing: border-box; } - 避免在组件内混用
content-box和border-box，否则响应式断点会失效 - 第三方 UI 库（如 Ant Design、Element Plus）内部已设为
border-box，但自定义组件必须自己加
padding 和 margin 在组件规范里的分工边界
padding 属于组件“自身呼吸空间”，影响背景色填充范围和内容可点击区域；margin 是组件“社交距离”，决定它和兄弟节点如何排列。二者不能互换。
立即学习“前端免费学习笔记（深入）”；
- 按钮文字距边框：用
padding（比如padding: 8px 16px） - 按钮与下方表单控件的间隔：用
margin-bottom（比如margin-bottom: 12px） - 卡片标题和内容区之间的空隙：属于卡片内部结构，用
padding-top或子元素margin-top，但推荐前者——避免外边距合并（margin collapse）风险 - 禁止在组件根元素上写
margin作为“默认间距”，应由父容器通过布局容器（如flex或grid的gap）统一控制
如何避免 margin 折叠破坏组件间距一致性？
垂直方向相邻块级元素的 margin-top 和 margin-bottom 会合并取最大值，这不是 bug，但会让组件间距“消失”。典型场景：
- 两个
.section组件上下紧挨，各自设margin: 24px 0，实际只显示 24px 间距，而非预期的 48px - 子组件设了
margin-top，父组件没设padding，结果子组件的上外边距“穿透”到父组件外部
解决方法不是禁用 margin，而是建立约束规则：
- 组件内部只用
padding做垂直分隔（如.card > * + *设margin-top: 16px是危险的） - 组件之间统一用
flex容器配gap，或grid配row-gap/column-gap，它们不会折叠 - 若必须用
margin，确保至少一方有border或padding（哪怕padding: 0.1px）来阻断折叠
组件库中 spacing token 的落地要点
设计系统常定义 spacing-xs: 4px、spacing-md: 16px 等 token，但直接写进 CSS 容易失控：
- 不要在每个组件里重复写
margin-bottom: var(--spacing-md)，改用 utility class（如mb-md）或 CSS-in-JS 的 spacing props - 避免
padding和margin混用同一套 token 值——它们语义不同，比如spacing-sm适合按钮内边距，但作为卡片外边距可能太小 - 移动端需注意：1px 边框在高 DPR 屏幕下会变细，但
margin和padding是逻辑像素，不受影响；若要视觉等宽，border应用1px，而间距类用px或rem
真正难的不是写对某一行样式，而是让所有组件在任意嵌套深度、任意布局上下文中，间距行为可预测、可收敛——这依赖规则，而不是技巧。
