gap是唯一兼顾响应式、不破坏布局逻辑且免外边距合并的间距方案；但仅在flex容器满足display:flex真实生效、子项无float或固定width、且设flex-wrap:wrap时才起效。
gap 是唯一能真正兼顾响应式、不破坏布局逻辑、且免于外边距合并的间距方案；但必须用对上下文，否则它就只是个被忽略的 CSS 声明。
gap 在 flex 容器中不生效？先确认这三件事
flex 布局下 gap 失效，90% 不是语法错，而是前提条件没满足：
- 父容器
display: flex必须真实生效——用 DevTools 查 computed styles，确认不是被float、inline-block或其他 display 值覆盖 - 子项不能同时设
float或固定width（比如width: 50%），否则 flex 分配逻辑中断，gap被降级忽略 - 若希望换行后仍有列间间隙，必须加
flex-wrap: wrap；否则gap只在单行内计算，换行即失效
卡片群组用 grid 还是 flex？看换行需求
响应式卡片群组推荐优先用 display: grid，尤其当列数需随屏幕动态变化时：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))配合gap: clamp(0.5rem, 2.5vw, 1.25rem)，自动适配从手机到桌面 - flex 布局虽可实现等宽，但
flex-wrap: wrap下的gap对“行尾空白”无感知，容易在小屏出现右侧空隙异常 - 避免嵌套：外层用 grid +
gap，内层卡片自身不要设margin，否则叠加导致视觉间距翻倍
图片或文本块的边距自适应，别只改 margin
图片 margin-top/margin-bottom 看似没反应？大概率是 display 类型和单位双重问题：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<img>默认是inline元素，垂直 margin 受限于行高；稳定做法是加display: block或用flex容器包裹 - 固定
px边距在不同设备上视觉权重失衡；改用rem（需同步设置html { font-size: clamp(14px, 1.5vw, 16px); }）或vw（注意上下 margin 的vw仍按视口宽度算） - 若图片父容器是 flex 项，务必加
min-width: 0，否则max-width: 100%和 margin 都可能被 flex 强制忽略
旧浏览器兼容 gap？别用 margin 模拟
IE11 或 Safari ≤14.1 不支持 gap，但直接给右列加 margin-left 会引发换行错位：
- 安全降级方案：保持父容器
display: flex+gap: 0，仅在右侧子项内部包一层<div class="inner">，对其设padding-left: 32px - 这样既不干扰 flex 分配逻辑，又避免了
margin在小屏下把元素推到第二行 - 更关键的是：
padding不参与盒模型宽度竞争（只要父项设了box-sizing: border-box），而margin会直接影响 flex 计算结果
真正难的从来不是“怎么写 gap”，而是判断当前布局是否真处于它能起效的上下文中——尤其是当多个 CSS 规则叠加、或跨断点切换时，computed styles 里的 display 值和 flex 相关属性，才是唯一可信的依据。
