gap是最干净的解法，但需满足父容器display: flex、子项无float/inline-block/固定宽、子项有尺寸分配依据三个条件；响应式双列推荐flex+gap+flex:1+min-width:0；浮动时gap无效，改用margin；IE11用padding-left模拟。
直接用 gap 是最干净的解法，但前提是布局上下文没被破坏——90% 的“间隙不生效”问题，根源不在语法，而在父容器或子项的样式冲突。
flex 容器中 gap 不生效的三个硬性条件
浏览器只在满足全部以下条件时才真正应用 gap：
- 父容器必须有
display: flex（且未被float、position: absolute或其他规则覆盖） - 子元素不能带
float、display: inline-block或固定width（如width: 50%），否则 flex 分配逻辑中断 - 子元素需有明确的尺寸分配依据，比如
flex: 1、flex-basis或min-width: 0（防止长内容撑开列宽）
检查方法：打开开发者工具，看父容器 computed styles 里 display 是否为 flex；再点开子项，确认 float 值是 none，width 是 auto。
响应式双列间精确留白的推荐写法
目标是左右两栏始终并排，且中间稳定保持 32px 间距，不因屏幕缩放或内容长度变化而换行或挤压：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex和gap: 32px，同时加width: 100%或max-width: 1200px - 每个子列用
flex: 1分配空间，强制加min-width: 0（关键！防 URL/代码块撑宽） - 绝对不要对子列直接设
padding-left或margin-left，它会和gap叠加，导致总宽度超限
示例：
.columns {
display: flex;
gap: 32px;
width: 100%;
}
.column {
flex: 1;
min-width: 0;
}
图片与文字混排时的间距控制误区
浮动图片（float: left）时，gap 完全无效——它只作用于 flex/grid 容器的直系子项，不参与文档流布局。此时起效的是 margin：
- 左浮动图片，用
margin-right推开右侧文字；右浮动则用margin-left - 行内混排（
<img>在段落中），优先用vertical-align: middle+margin-right: 0.75em，比像素值更适配字号缩放 - 若图片和文字属同一语义组（如头像+简介），别硬套浮动，改用
display: flex容器，gap管间距，align-items管对齐
IE11 及更早版本的兼容方案
gap 在 IE 中完全不支持，也不能靠给右列加 margin-left 模拟——小屏下它会直接掉到第二行。安全做法是把间距逻辑“下沉”到内容层：
- 父容器保持
display: flex，但gap: 0 - 右列内部包一层
<div class="inner">，只对它设padding-left: 32px - 左列保持原样，不加任何 padding/margin
这样 flex 仍按原始宽度分配，padding 只影响内容区，不干扰布局计算，断点切换时也不会错位。
真正麻烦的不是怎么加空隙，而是空隙加在哪一层：是容器级的结构间距，还是内容级的视觉留白。选错层级，响应式就从第一行开始失效。
