display: flex 能消除块级元素间空白，因其绕过行内格式化上下文，忽略源码空白字符；父容器需设 display: flex、flex-wrap: nowrap、gap: 0，并避免误改 align-items；子元素需重置 inline-block 和 margin；兼容性上 safari≤14.0 不支持 gap，ie 完全不支持 flex。
为什么 display: flex 能直接干掉块级元素间的空白？
因为 flex 容器默认不触发「行内格式化上下文」，也就绕开了 HTML 中的换行符、空格被渲染为文本节点再折算成间隙的老问题。普通 div 块流布局里，写在不同行的两个 div 之间其实藏了个看不见的文本节点（换行+缩进），浏览器会把它当空格处理；而 display: flex 把子元素全当 flex item 管，完全忽略源码里的空白字符。
用 display: flex 消间隙时，父容器必须加哪些基础声明？
只写 display: flex 不够，常见漏项会导致意外行为：
-
flex-wrap: nowrap—— 默认值，但显式写上更稳妥，避免子项多时换行引入新间隙 -
gap: 0—— 虽然现代浏览器默认为 0，但部分旧版 Safari 对gap支持不稳定，显式设为 0 更保险 - 别乱加
align-items: stretch（默认值）以外的值，否则可能让子项高度不一致，视觉上像“有间隙”
子元素是 inline-block 或带 margin 怎么办？
flex 布局不会自动清空子元素自带的外边距或显示模式残留影响：
- 如果子元素原来设了
display: inline-block，得手动重置：在子元素上加display: block或干脆不设，由 flex 自动接管 - 已有
margin的子元素，间隙是它自己撑出来的，不是布局导致的——得查 CSS 优先级，看是不是某个规则没被覆盖 - 特别注意：
margin: auto在 flex 里有特殊居中效果，别误以为是“间隙”
兼容性坑点：哪些浏览器会翻车？
主要卡在 Safari 14.1 之前和 Android WebView 旧版本：
- Safari ≤ 14.0：不支持
gap，但不影响间隙消除本身；只是如果你靠gap控制间距，得回退到margin - IE 完全不支持
display: flex，如果还要兼容，别用这套方案，改用font-size: 0或负margin - Flex item 的
min-width: auto在 Safari 15.4 有 bug，可能导致内容溢出却不换行，看起来像“右侧被截断”，其实是宽度计算异常
真正容易被忽略的是：flex 容器一旦设了 width 或 max-width，又没处理子项收缩逻辑，间隙没啦，但内容可能挤成一团——间隙是消了，可布局是否还符合预期，得盯住子项的 flex-shrink 和内容尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
