如何阻止浏览器跨span元素边界折叠空白？（带边框文本分组场景）

问题分析 #

用带边框的<span>做文本分组时，若某个<span>内部以空白结尾，浏览器会将该内部空白与<span>外部的相邻空白合并，最终忽略外部空白，导致前后<span>的边框直接挤压在一起；而正常情况下，<span>间的空白会渲染出间距，这种差异会影响视觉效果。

简便解决方案 #

使用display: inline-block样式，既能让浏览器将<span>边界视为有效分隔，避免跨元素的空白合并，又能保留正常的空白折叠和换行功能，同时支持主动让边框紧密相邻的场景：

span {
  padding: 1ex;
  border: thin solid black;
  display: inline-block;
}

效果说明 #

• 当HTML中<span>之间存在空白（空格、换行等）时，无论<span>内部是否有结尾空白，都会渲染出正常的间距；
• 当HTML中<span>之间没有空白时，边框会紧密相邻，满足分组无间距的需求；
• 该样式不会破坏文本流的正常换行，<span>会随文本自动换行，内部空白也会正常折叠。

原理说明 #

inline-block属于行内块级元素，浏览器会将每个<span>视为独立的块级单元处理，元素之间的空白不会与元素内部的空白合并，从而避免了边框挤压的问题，同时保留了行内元素的换行特性。

内容的提问来源于stack exchange，提问作者Josh Grams