margin 是「外推」控制元素间距离，padding 是「内撑」增加内容与边框间距；二者不可互换，且需注意塌陷、inline 元素限制及盒模型影响。
margin 和 padding 的语义区别必须分清
很多人一上来就调数字，结果元素位置乱套，根本原因是没搞懂 margin 是「外推」、padding 是「内撑」。比如给一个 加 padding，文字离边框变远；加 margin，按钮整体离旁边元素变远——两者不互换，也不能靠其中一个硬扛所有间距需求。
常见错误现象：margin 在父子元素间出现塌陷（尤其是上/下方向），导致布局高度不可控；padding 用在 inline 元素（如 ）时左右生效、上下无效（除非改 display）。
-
margin适用于控制兄弟元素或容器与子元素之间的距离 -
padding适用于让内容「呼吸」，比如表单输入框文字不贴边、卡片内容不顶头 - 盒模型默认是
content-box：设置width: 200px; padding: 10px;→ 实际占用宽度是 220px - 想避免尺寸意外膨胀，全局加
* { box-sizing: border-box; }
flex 布局中 justify-content 和 gap 更可靠
传统浮动或 inline-block 布局里靠 margin 撑开间距，容易因换行、最后一项多出空白、响应式断点错位等问题翻车。Flex 容器下的 gap 是专为间距设计的属性，它只作用于直接子元素之间，不触发 margin 塌陷，也不影响首尾外边距。
使用场景：导航栏菜单、图标栅格、卡片列表——只要子元素是同级且需等距分布，优先用 gap。
立即学习“前端免费学习笔记（深入）”；
-
gap可分别设水平/垂直：gap: 12px 8px;（等价于row-gap: 12px; column-gap: 8px;） - IE 不支持
gap（哪怕 flex 已开启），需要降级方案：对子元素设margin-right+:last-child { margin-right: 0; } -
justify-content: space-between看似方便，但要求子元素数量固定，否则两端对齐会暴露空隙缺陷
div.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
div.container > * {
flex: 1 1 200px; /* 防止单个子项过宽撑破 gap */
}grid 布局用 grid-gap（或 gap）统一控制网格间距
Grid 是目前最可控的二维间距方案。gap 在 grid 中行为更稳定：它明确作用于网格轨道（track）之间，不会和子元素的 margin 混淆，也不存在塌陷问题。比手动给每个 grid item 写 margin 干净得多。
性能影响几乎可忽略，但要注意：如果 grid 容器设置了 overflow: hidden，而 gap 过大导致内容被裁剪，需配合 minmax() 或 auto-fit 调整列数。
-
gap在 grid 中兼容性好于 flex 中的gap（Chrome 66+/Firefox 63+ 支持，Edge 16+ 开始支持） - 避免同时用
gap和子项的margin，容易叠加出意料之外的空白 - 想让第一行/列紧贴容器边缘？别删
gap，改用padding给 grid 容器自身留白
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
padding: 16px; /* 外围留白，不是靠 gap 实现 */
}响应式间距慎用固定像素值
写死 margin: 16px 或 padding: 12px 在小屏上会挤占内容空间，在大屏上又显得稀疏。现代方案倾向用相对单位或媒体查询分层控制。
容易被忽略的细节：CSS 自定义属性（css vars）配合 @media 可以集中管理间距体系，比重复写媒体查询干净得多。
- 基础单位推荐
rem（基于根字体大小）或em（基于父元素字体大小），避免px锁死缩放能力 - 移动端优先可设：
:root { --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; }，再用margin: var(--space-md); - 媒体查询中不要只改一个方向间距，例如只调
margin-top而忽略margin-bottom，易造成垂直节奏断裂
复杂点在于：间距不只是数值问题，更是视觉节奏问题。同一组卡片，gap: 16px 在桌面端刚好，在手机上可能需要降到 12px，但这个“刚好”没法靠工具自动判断，得靠眼盯 + 真机测试。
