通过将 span 设置为 display: inline-block，可有效避免浏览器跨标签合并空白符导致的边框粘连问题，同时保留正常的文本换行与空格折叠行为。
通过将 span 设置为 `display: inline-block`，可有效避免浏览器跨标签合并空白符导致的边框粘连问题，同时保留正常的文本换行与空格折叠行为。
在 HTML 中，<span></span> 默认是 inline 元素，其行为遵循 CSS 的「空白处理规则」：连续的空白字符（包括元素间的换行、制表符和空格）会被合并为单个空格，且跨 inline 元素边界的空白也会被统一折叠。这在普通文本中无感，但当你为 span 添加边框、内边距（如 padding: 1ex）并依赖视觉间距时，就会出现“本该有间隙却紧贴”的问题——正如示例中 <span>span_ </span> <span>span</span> 的边界因外部空格被吞而消失。
✅ 推荐解决方案：display: inline-block
将 span 显式设为 inline-block，使其既保持行内布局特性（不独占一行、可与其他内联元素共存），又获得块级元素的独立空白处理能力：元素间的空白字符不再参与跨标签折叠，而是作为独立的「匿名内联盒子」存在，从而保留预期的视觉间距。
span {
display: inline-block; /* 关键：打破空白合并链 */
padding: 1ex;
border: thin solid black;
}
<p><span>span</span> <span>span_ </span> <span>span</span></p>
此时，<span>span_ </span> 结尾的空格保留在其内部，而它与后一个 <span></span> 之间的空格则作为独立空白渲染，两个边框间自然出现间隙，效果符合设计预期。
⚠️ 注意事项：
-
inline-block不影响文本内容本身的空格折叠逻辑（即 span 内部的多个空格仍会折叠为一个），因此你无需修改原始文本或引入white-space: pre-wrap等破坏性样式； - 它支持正常换行（当行宽不足时，整个
inline-block会整体换行，而非像float那样脱离流）； - 若需更精细控制（如仅在特定位置保留/禁止换行），可配合
white-space: nowrap或inline-block已足够简洁可靠。
总结：这不是 bug，而是 inline 元素的规范行为；而 display: inline-block 是语义清晰、零侵入、无需 JS 处理的最优样式级解法。
