gap仅在flex或grid容器上生效，需设display:flex/grid；flex中用固定宽+flex-shrink:0与flex:1配合gap控制两栏间距；grid中推荐grid-template-columns:300px 1fr搭配gap:24px。
gap 必须用在 flex 或 grid 容器上才生效
直接给 <aside></aside> 或 <main></main> 单独加 gap 没反应——它不是元素级属性，只作用于容器的直系子元素之间。常见错误是把父 <div class="layout"> 写成普通块级元素，忘了设 <code>display: flex 或 display: grid。
Flex 布局中 gap 控制两栏间距的写法
Flex 更适合一维分栏（比如左右两栏），但要注意宽度控制逻辑：
-
gap在flex-direction: row时等效于列间距，不控制行距 - 侧边栏建议用固定宽 +
flex-shrink: 0，主内容用flex: 1，否则小屏下gap会把两栏挤出视口 - 别用
width: 25%配gap：百分比宽 + gap 容易导致总宽超 100%，尤其在窄屏下 - 示例：
.layout { display: flex; gap: 24px; } aside { width: 300px; flex-shrink: 0; } main { flex: 1; }
Grid 布局中用 gap 更直观且不易出错
Grid 天然支持二维结构，对侧边栏+主内容这种经典两栏场景更稳妥：
- 推荐写法：
grid-template-columns: 300px 1fr，再配gap: 24px；1fr不是百分比，而是“拿走所有剩余空间” - 想防塌缩（比如主内容为空时侧边栏被拉宽）：改用
minmax(300px, 1fr) - 间隙单位优先用
px或rem，避免在 Grid 中混用百分比列距（仅 column-gap 支持，且 Safari 旧版有兼容问题） - 注意：IE 完全不支持
gap和fr，如需兼容，得回退到margin+ Flex 并手动计算
gap 和子元素 margin 叠加容易造成空隙失控
调试时最常被忽略的一点：如果 <aside></aside> 自己设了 margin-bottom: 16px，又在父容器上加了 gap: 24px，视觉间距就变成 40px，但 DevTools 的 Layout 面板可能只高亮其中一个值。
立即学习“前端免费学习笔记（深入）”；
- 建议统一用
gap管理子项间距离，子元素自身清空margin - 首尾留白靠父容器的
padding，不是gap的职责 - 用浏览器 DevTools 的 Computed 面板确认生效的是
gap还是某个子项的margin，避免误判
