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 塌陷。它只发生在普通文档流中的块容器之间，比如两个连续的 <p></p>，或父元素没边框/内边距时的子元素与父元素之间。
- 避免父子塌陷：给父元素加
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），所有间距从此变量派生。
