如何去除多个span标签之间自动生成的空白间距

这个4px的间距是浏览器默认解析规则导致的：span默认是行内元素，标签之间的换行、空格、缩进都会被浏览器识别为一个空白字符，最终渲染为约4px的可见间距。

推荐两种兼容性好、改造成本低的方案，可根据业务场景选择：

• 方案1：父容器设置font-size: 0，再单独给span恢复正常字号
  优势：不需要修改原有HTML结构，不改变元素原有行内特性，兼容性极佳
  代码示例：

  /* 替换为实际包裹span的父元素选择器 */
  .text-container {
    font-size: 0;
  }
  .text-container span {
    font-size: 16px; /* 替换为需要的实际字号 */
  }
  

• 方案2：父容器开启Flex布局
  优势：现代前端通用方案，还可以方便后续调整字符对齐、间距等样式
  代码示例：

  /* 替换为实际包裹span的父元素选择器 */
  .text-container {
    display: flex;
  }
  

• 删除HTML中span标签之间的所有换行和空格，将所有span写在同一行：

  <span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span></span><span>w</span><span>o</span><span>r</span><span>l</span><span>d</span>
  

  缺点：代码可读性大幅下降，不利于后续维护
• 给span设置浮动

  span {
    float: left;
  }
  

  缺点：浮动会导致元素脱离文档流，需要额外处理父容器高度塌陷问题，容易影响其他页面布局

内容的提问来源于stack exchange，提问作者Swapnil Kotkar