内联元素换行产生空格是因为浏览器将源码中换行、空格、制表符统一视为空白符，按white-space:normal规则合并为一个空格文本节点并渲染；该空格宽度约等于当前font-size×0.25，非margin或padding所致。
内联元素换行为什么会产生空格
浏览器把 HTML 源码中元素间的换行、空格、制表符统一当作空白符处理，按 white-space: normal 规则合并为一个空格——这空格被渲染出来，就成了你看到的“多余间隙”。它不是 margin，也不是 padding，而是真实存在的文本节点（Node.TEXT_NODE），内容就是那个换行符转成的空格。
父元素设 font-size: 0 最常用但要注意子元素重置
这是最稳定、兼容性最好的方案：父容器设 font-size: 0，让那个空格“没字号可依”，视觉上消失；再在每个子元素上显式设置需要的 font-size。
- 必须重置子元素字体，否则文字不显示或字号异常
- 如果子元素含
em/rem单位，需注意继承链断裂，建议改用px或直接写死 - 对
line-height有依赖的布局（如垂直居中）可能受影响，要同步检查
display: flex 能根治但会改变布局流
把父元素设为 display: flex，子元素自动变成 flex item，不再走行内排版逻辑，换行符彻底失效。这个方案不依赖字体、不引入负 margin、也不污染语义。
- 子元素默认
flex-direction: row，间距需用gap显式控制 - 若原布局依赖
vertical-align或与其他行内元素混排，这里会断掉上下文 - IE10+ 支持，但 IE10/11 对
gap不支持，得用margin模拟
HTML 注释和紧凑写法适合模板受限场景
当无法改 CSS（比如 CMS 模板只允许改 HTML），可用 <!-- --> 把换行“吃掉”：<span>A</span><!-- --><span>B</span>；或者干脆写成一行：<span>A</span><span>B</span>。
- 注释法保持代码可读性，但大量使用会让源码臃肿
- 紧凑写法在模板循环中不可控（如 Vue/JSX 渲染列表），基本只适用于静态 HTML
- 某些构建工具（如 html-minifier）开启
collapseWhitespace时会自动干这事，但注意它默认跳过<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>等标签
真正容易被忽略的是：这些空隙的宽度 = 当前 font-size × 0.25 左右（不是固定 8px），所以哪怕你只改了父级字体，间隙也会跟着变。调试时别只盯着 margin 和 padding 查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
