如何删除单词开头的间距？

Question

我正在尝试删除h1标记开头的间距。请参阅随附的屏幕截图。我用蓝色突出显示了h1标签，因此您可以在措辞开头看到额外的空格。它大约是1或2像素。空间不是边距或填充。空间绝对来自h1元素，因为我已从页面中删除了其余元素。这个空间怎么样？以及如何删除它？

更新：有关示例代码，请参阅此jsFiddle

Answer 1

在这种情况下，问题是由于HTML标记正文上的填充。

添加它会清除它;

body{
 margin:0px;
 padding:0px;
}

如果没有完整的代码，这是否是您方案中的解决方案是不可能的。

http://jsfiddle.net/jU43x/5/

Answer 2

将margin-left: -3px;添加到h1代码会解决此问题：demo

h1 {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
padding: 0;
line-height: 1.2;
font-size: 97px; 
margin-left: -3px;
}

Answer 3

每个字符前面的空白垂直条几乎肯定是您用来呈现此<h1>文本的字体的特征。字体设计者通过在字符末尾放置一些空格并在开头放置一些空格来管理字符间距。它们通常针对对齐线的开始和结束处的光学（眼球）对准以及对于良好平衡的字内间距进行优化。

如果你必须摆脱它，你可以尝试一些事情。

1. 负面追踪。尝试使用letter-spacing之类的小型负面CSS .05em属性。这会让你的角色更加紧密。这种效果会很微妙。

2. 粗体字体选择。通常，字体设计者通过围绕其中心线对称地加粗笔划来使字体变粗。这可能会占用一些领先的空白。

3. 作为最后的手段，将文本渲染为图形（png或gif），然后修剪其边缘。这看起来不太好。

Answer 4

@OllieJones的分析是正确的：您正在处理字体设计的细节。实际上，您试图在特定的上下文中撤消字体设计者的某些决定;没有一般的机制。

您可以做的是将内容转移到左侧。移位量取决于特定的字体属性和涉及的字符。在给定的情况下，5px的移位将“C”推向左边缘。但请注意，如果第一个字母是其他字母，它可能会被推得太多。在字体设计中，不同的字母有意在它们周围有不同的间距。

使用辅助标记和负边距可以使用定位或更安全的方式移动内容：

<style>
h1 > span {
    display: block;
    margin-left: -5px
}
</style>
<h1><span>Covered with grass then detained</span></h1>

这使您可以为h1元素使用正常样式。例如，如果在其周围绘制边框，则字母“C”将触及边框。我认为这是你想要的（尽管这会是一个排版错误）。或者，只需在其上设置负左边距即可将h1元素向左移动。