padding用于元素自身视觉边界，margin用于元素间隔离；单位优先用rem、em或clamp()；flex/grid中注意margin行为差异；推荐CSS变量分层管理间距。
响应式布局中 padding 和 margin 的选择逻辑
别一上来就套 padding 或 margin，得先看这个间距是否属于「元素自身视觉边界」还是「元素与其他元素之间的隔离」。前者用 padding，后者用 margin。比如卡片内文字离边框的距离是 padding；卡片和下方按钮之间的空隙是 margin。
移动端适配时 padding/margin 的单位陷阱
用 px 写死间距在小屏上会显得拥挤，用 % 又容易受父容器宽度干扰（尤其 flex 容器里）。更稳妥的是：
-
rem：配合根字体缩放，适合统一控制整体疏密节奏 -
em：适合组件内部相对缩放（如按钮内图标与文字间距） -
clamp()：现代方案，例如padding: clamp(0.5rem, 2vw, 1rem)，兼顾小屏紧凑和大屏舒展
注意：不要在 margin 上滥用 % 垂直方向（margin-top/bottom），它按父容器宽度计算，不是高度，极易导致意外空白。
flex/grid 布局下 margin 的塌陷与失效问题
Flex 容器中子项的 margin 不会塌陷，但可能被对齐属性覆盖（如 align-items: center 会让垂直 margin 看似无效）；Grid 中相邻轨道间没有 margin 塌陷概念，但 gap 优先级高于子项 margin —— 如果同时设了 grid-gap 和子项 margin，gap 会撑开轨道，而 margin 仍作用于子项自身，可能造成双重留白。
立即学习“前端免费学习笔记（深入）”；
常见误操作：
- 给 flex 子项写
margin: auto试图居中，结果横向/纵向行为不一致（取决于flex-direction） - 在 grid item 上设
margin: 1rem，又设gap: 2rem，实际间距变成3rem
媒体查询中 padding/margin 的断点策略
别为每个断点重写所有间距值。推荐分层管理：
:root {
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
}
@media (min-width: 768px) {
:root {
--space-sm: 0.75rem;
--space-md: 1.25rem;
}
}
.card {
padding: var(--space-sm) var(--space-md);
}
这样改一个变量就能批量调整，也避免在多个选择器里重复写媒体查询。另外，padding 在响应式中比 margin 更常需要动态调整——因为内容区域尺寸变化直接影响可读性，而外边距更多服务于结构节奏，变动频率低些。
最易忽略的一点：当使用 box-sizing: border-box（应始终开启）时，padding 会压缩内容宽度，但 margin 不影响盒模型尺寸计算；如果用 max-width 限制容器，再叠加大 padding，可能导致内容区过窄，这时该减 padding 而不是加 margin。
