margin作用于元素外边距，影响与兄弟/父容器间距；padding作用于内边距，撑开内容与边框间空间；两者均不改变width/height（box-sizing未设border-box时）。

margin 和 padding 的本质区别在哪里

关键看作用对象：margin 控制元素**外边距**，影响它和兄弟/父容器的间距；padding 控制元素**内边距**，撑开内容区与自身边框之间的空间。两者都不改变元素自身的 width 和 height（除非启用了 box-sizing: border-box）。

常见错误是用 padding 去“推开”相邻元素——这根本没用，因为内边距不会影响外部布局流；反过来，给行内元素设 margin-top 或 margin-bottom 也常无效（浏览器会忽略），得先改成 display: inline-block 或 block。

垂直方向 margin 为什么会塌陷

块级元素的上下 margin 相邻时，不会叠加显示，而是取其中较大者——这就是 margin 塌陷。它只发生在普通文档流中的块容器之间，比如两个连续的

• 避免父子塌陷：给父元素加 border-top、padding-top，或设 overflow: hidden
• 避免兄弟塌陷：用 flex 或 grid 替代纯块流布局，天然不塌陷
• 慎用 margin: auto 垂直居中：在非 flex 容器里它不会生效，只对水平方向有效

什么时候该用 padding 而不是 margin

核心判断依据是「要不要把背景色/边框一起撑开」。如果希望背景或边框延伸到留白区域，就用 padding；如果只是想让元素彼此远离，且不希望影响自身视觉范围，就用 margin。

典型场景：

• 按钮文字周围留白：用 padding，否则文字会紧贴边框，且背景无法覆盖点击热区
• 卡片内容与边框的距离：用 padding，保持内容可读性
• 导航菜单项之间的间隔：用 margin，避免每个菜单项都带额外背景填充

.btn {
  padding: 8px 16px; /* 文字被包裹在背景内 */
  background: #007bff;
}
.nav-item {
  margin-right: 12px; /* 仅控制项间距离，不干扰背景 */
}

响应式中 margin/padding 的单位选择

固定像素（px）在小屏上容易造成溢出，推荐优先使用相对单位：

• rem：适合全局统一缩放，依赖根字体大小，适配高 DPI 屏幕更稳
• em：适合组件内部比例缩放，但嵌套深时易失控
• %：适合宽度类留白，比如左右 padding: 5% 让内容居中自适应
• 避免在 margin 上混用 vh/vw：滚动时可能引发意外位移，尤其 Safari

复杂点在于，很多设计稿标的是「像素值」，但直接写死 px 会让移动端体验断层。真正省事的做法是建立一套基于 rem 的 spacing scale（比如 --space-xs: 0.25rem），所有间距从此变量派生。