我一直在为一个客户进行项目，一切顺利，直到我注意到我的h1 / h2 / h3（任何标题标签）已移至正确的2 / 3px。他们可能一直都在这样做，但我只是注意到。当您在devtools中突出显示时，可以很清楚地看到这些差距（请参见下面的示例）
有人以前注意到过这个吗？谷歌搜索一直很困难，因为每当您询问前后的空格时，答案都是关于上方和下方的空格，而不是文本开始之前。我已经在Chrome，Firefox和IE中进行了测试，问题是相同的。我已经通过左移来解决了这个问题：-2px hack，但是像这样保留它并不好，我也很好奇为什么会这样。看着它，我认为这可能与设置的-webkit-margin-before属性有关，但即使使用！important清除也无法解决该问题。我还尝试使用necolas normalize css文件查看是否有帮助，但是什么也没发生。我使用的是从较大项目继承的样式（并添加了自己的样式），但以前从未见过这样的样式。 （或者也许从来没有注意到它...）
它也似乎只在h标签的首字母上-因此在此多行示例中：
second example showing multi-line h tag
仅在第一个字母和下一行可以使用之前出现空格。
我在h2标签上粘贴了计算样式的快照-当您看到右侧突出显示的文本时，您应该能够看到差距。
computed styles and another image
有点难过，正在寻找帮助。
最佳答案
这很可能是由于字体本身的呈现（您无法真正与之交互）。您可能需要检查不同浏览器上的行为，因为它可能略有不同。
如此说来，这是一个贫民窟解决方法，您可能会发现它很方便。它涉及使用text-indent属性：
.test {
position:absolute;
left:100px;
top:100px;
font-family:Arial,Helvetica,sans-serif;
font-size:30px;
text-indent:-50px;
}
https://jsfiddle.net/rdo471dg/
关于html - 修正标题前2px的空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46310293/