外部留空用margin，内部留空用padding；注意外边距合并、flex/grid中优先用gap、margin:auto居中行为差异、响应式推荐rem变量。
margin 和 padding 到底该用谁
元素外部要留空，用 margin；内部内容和边框之间要留空，用 padding。很多人一上来就瞎加 margin，结果父子元素发生外边距合并（margin collapse），布局突然“塌陷”——比如两个 div 垂直堆叠，本想各留 10px 间距，实际只显示 10px 而不是 20px。
- 父容器没设
border或padding时，子元素的上/下margin会“冒出来”，和父元素外边距合并 -
padding不会合并，但会撑大元素尺寸（除非用了box-sizing: border-box） - 行内元素（如
span）的margin-top/margin-bottom无效，但padding有效（只是不推其他行内元素）
flex 布局里 gap 比 margin 更干净
在 display: flex 或 display: grid 容器中，优先用 gap 控制子项间距。它不干扰子元素自身盒模型，也不会触发外边距合并，写起来也少很多重复代码。
-
gap: 12px等价于所有相邻子项间横向 + 纵向都留 12px，不用每个子项都写margin-right或margin-bottom - IE 不支持
gap（Flex gap 从 Edge 88+、Chrome 89+ 开始支持；Grid gap 更早一点），老项目需降级用margin+:not(:last-child) - 注意
gap只作用于直接子元素，嵌套 flex 容器里的孙子元素不受影响
margin auto 在 flex 和 block 中行为不同
margin: auto 是居中的常用手段，但它在不同上下文里“自动”的对象不一样。
- 在普通块级流中，
margin: 0 auto只能水平居中（前提是宽度固定），上下auto无效 - 在 flex 容器中，
margin: auto会让元素在主轴和交叉轴都“吸满剩余空间”，相当于同时实现了水平 + 垂直居中（无需额外设置align-items） - 如果 flex 子项设置了
align-self: flex-start，那margin-top: auto仍会把它顶到交叉轴末尾——这个细节常被忽略，导致居中失效
响应式间距别只靠媒体查询硬切
用 rem 或 em 配合根字体大小缩放，比一堆 @media 写死像素更可持续。但要注意：padding/margin 用 em 会继承父元素字号，容易层层放大。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
rem，并在:root里定义--space-xs: 0.25rem这类 CSS 变量，后续直接写margin: var(--space-xs) - 移动端小屏下，
gap值建议最小不小于0.5rem（约 8px），否则手指点按易误触 - 避免对同一元素同时用
padding和margin实现“视觉间距”——这会让调试变得混乱，优先选一种语义明确的方式
gap 的兼容性、margin 合并的隐性规则、以及 em/rem 的继承链，这三个地方最容易在改版时突然出问题。改间距前，先看一眼 computed styles 里的 actual margin/padding 值，比猜靠谱得多。
