如何移除元素内文本开头的行内空白？

嘿，我太懂你这种被顽固空白折磨的感觉了——把margin、padding、line-height这些能调的属性都设到极致，结果那个开头的空白还是纹丝不动，简直离谱😤 除了用负margin，这里还有几个靠谱的方法可以试试：

• 先排查HTML源码里的“隐形空白”
  很多时候这个问题根本不是CSS的锅，而是你写HTML的时候不小心在文本开头加了空格、换行或者制表符。比如你写的是：

  <span>
    这是我的文本
  </span>
  

  或者<span> 这是我的文本</span>，这些源码里的空白会被浏览器解析成文本节点的开头空格，哪怕你把span的所有间距属性都设为0也没用。解决办法很简单：把源码里文本前面的空白删掉，写成<span>这是我的文本</span>就行。

• 利用text-indent微调（替代负margin）
  如果确实是字体本身自带的左侧间距（有些字体的字符会有默认的侧留白），可以试试用text-indent设置一个很小的负值，比如：

  span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: 0;
    word-spacing: 0;
    text-indent: -0.1em; /* 根据实际情况调整数值 */
  }
  

  这个和负margin类似，但它只影响文本的缩进，不会改变元素的盒模型布局，相对更稳妥一点。

• 用伪元素承载文本（彻底规避源码空白）
  如果你的文本是静态的，可以把文本放到::before伪元素里，这样HTML里的span标签本身没有文本内容，自然不会有开头空白：

  span::before {
    content: "你要显示的文本";
  }
  span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: 0;
    word-spacing: 0;
  }
  

  这种方法完全绕开了源码空白的问题，适合不需要动态修改文本的场景。

• 检查父元素的继承属性
  有时候问题出在父元素身上——比如父元素设置了text-indent、padding-left或者margin-left，这些属性会被span继承，导致看起来像是span自己有开头空白。你可以给span加个覆盖属性：

  span {
    /* 其他重置属性 */
    text-indent: 0;
    padding-left: 0;
  }
  

最后提醒一下，如果是字体本身的内置间距，不同字体的留白大小不一样，可能需要根据你用的字体微调数值~

内容来源于stack exchange