gap必须作用于display: flex或grid容器才生效，普通div/p加gap无效；IE完全不支持，Chrome84+、Firefox63+、Safari14.1+起稳定可用；混用margin会导致间距叠加。
gap 必须用在 flex 或 grid 容器上才生效
直接给普通 <div> 或 <code><p></p> 加 gap: 12px 是没反应的——它不是通用“间距属性”，只作用于启用了布局上下文的容器。常见错误是把图片全塞进一个没设 display: flex 或 display: grid 的父级里，然后纳闷为什么 gap 不起作用。
确认生效的最简单办法：打开 DevTools，在“Computed”面板里搜 gap，看值是否被计算出来；如果显示 normal 或空，说明容器没激活布局模式。
- Flex 场景下，必须同时有
display: flex和flex-wrap: wrap（尤其图片数量不确定时） - Grid 场景下，至少要有
display: grid和grid-template-columns - IE 完全不支持
gap，Edge 16+、Chrome 84+、Firefox 63+、Safari 14.1+ 才稳定可用
gap 值写法和常见错位陷阱
gap 单值写法最常用，比如 gap: 12px 表示行列间距都是 12px；双值写法是 gap: 8px 16px，**第一个是行距（row-gap），第二个是列距（column-gap）**，和 margin 的“上下左右”顺序无关。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 混用
gap和子元素的margin：比如img自己设了margin-bottom: 8px，容器又设了gap: 12px，视觉上就变成 20px 间距，且无法通过外边距合并（margin collapse）自动修正 - 忘了清除首尾留白：gap 只管“相邻子项之间”，不处理容器边缘。需要额外加
padding或用负margin补偿 - 在 Grid 中误用百分比：只有
column-gap支持百分比值（如column-gap: 2%），row-gap不支持
拼图式多图布局推荐用 grid-template-columns: repeat(auto-fit, minmax(...))
硬写 grid-template-columns: repeat(3, 1fr) 是多数人第一反应，但小屏下图片会被压扁或溢出。真正适配的做法是让列数随容器宽度自动变化：
gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
含义：每列最小 250px，空间够就均分，不够就自动减列（比如从三列退到两列，再退到单列）。搭配 img { width: 100%; height: auto; } 即可保持比例，不用 flex、float 或 inline-block ——那些在 Grid 容器里不仅无效，还可能触发怪异行为。
- 想等高显示？加
align-items: start，别用align-items: stretch（默认值），否则小图会被拉高变形 - 需要裁剪统一高度？改用
height: 200px; object-fit: cover;，但务必显式声明width和height属性防布局抖动 - 兼容 IE11？退化方案用
display: inline-block+font-size: 0清除换行符间隙
Flex 方案更适合简单并排或动态数量场景
当图片数量少（比如 2–4 张）、或需在窄屏自然折行为单列时，Flex 比 Grid 更轻量、更可控：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.gallery img {
flex: 1;
max-width: 100%;
height: auto;
}
关键点在于 flex: 1 让图片平分可用宽度，并自动扣除 gap 占位；max-width: 100% 防止原始大图撑破容器。如果某张图特别宽，仅靠 width: 100% 会拉伸它，而 max-width 能守住底线。
- 老版 Safari（gap？用
@supports (gap: 1rem)包裹，降级为margin逻辑 - 想控制水平分布？加
justify-content: space-between或space-around，但注意它们对首尾项的影响 - 避免用
white-space: nowrap强撑一行——一窄就横向溢出，体验极差
