html - 修复标题标签前奇怪的 2px 间隙

Question

我一直在为一个客户做一个元素，一切都很顺利，直到我注意到我的 h1/h2/h3(任何标题标签)已经向右移动了 2/3 像素。他们可能一直都在这样做，但我只是刚刚注意到。当您在 devtools 中突出显示时，可以非常清楚地看到这些差距(参见下面的示例)

有没有人注意到或遇到过这个？谷歌搜索一直很困难，因为每当您询问前后空格时，答案都是关于上方和下方的空格，而不是在文本开始之前。我在 Chrome、Firefox 和 IE 中测试过，问题是一样的。我通过放置一个 left: -2px hack 来绕过它，但这样留下它并不好，我也很想知道为什么。看着它，我认为这可能与正在设置的 -webkit-margin-before 属性有关，但即使使用 !important 清除它也无法修复它。我还尝试使用 necolas normalize css 文件来查看是否有帮助，但没有任何反应。我正在使用从一个更大的元素(并添加我自己的)继承的样式，但以前从未见过这样的样式。 (或者也许只是从来没有注意到它......)

它似乎也只出现在 h 标签的第一个字母上 - 因此在这个多行示例中:

second example showing multi-line h tag

空格只出现在第一个字母之前，后面几行都可以。

我已经在 h2 标签上粘贴了计算样式的截图 - 当您看到右侧突出显示的文本时，您应该能够看到差距。

computed styles and another image

有点难过，正在寻求帮助。

Answer 1

这很可能是由于字体本身的呈现(您无法与之真正交互的东西)。您可能需要检查不同浏览器上的行为，因为它可能略有不同。

话虽如此，这里有一个贫民区解决方法，您可能会发现它很方便。它涉及使用文本缩进属性:

.test {
  position:absolute;
  left:100px;
  top:100px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:30px;
  text-indent:-50px;
  }

https://jsfiddle.net/rdo471dg/