第一个字母CSS上的左侧空格

Question

我正在使用Google字体'Lato',我在左侧正确对齐标题​​和文字时出现问题...字体(大的时候)似乎在第一个字母上有一个空间,并且在没有空格的情况下不会左对齐! ？

所以这里也是一个小提琴:

<h1>Hello</h1> <p>Hello, this is sentance</p>

小提琴

此外,在左边缘(magin-left:-10px)上添加一个负值似乎是一个糟糕的解决方法...这对于不同的字体大小不会起作用,除非根据需要单独调整...乖必须是更好的解决方案吗？

有人可以帮忙吗？

Answer 1

好吧,每个人都说这是由于线路作为标题而导致的自动填充或边距错误.看到这个小提琴作为证据:

http://jsfiddle.net/w25j9L7o/26/

领先的空间不是由浏览器或CSS或DOM /浏览器级别的任何其他内容呈现的.这是字体.该H字形周围有一些内置的填充,较大的字体大小,更引人注目的是填充会.

即使您使用负边距来补偿:

1. 角色本身正在移动,其中包括空的空间,因此空的空间也会滑动,从而影响布局.可见字符不会滑入空白区域,如果使用CSS修复它,整个字符(可见和不可见)将向左移动.

2. 您需要根据字体大小调整该偏移量或计算出基础百分比,以便偏移量随着任何字体大小设置而增长.

或者您可以使用不具有此特征的其他字体.

Answer 2

在这种情况下，PX单元不是一个好的选择。如果您使用行高等字体属性，我建议使用EM单位。因为它会为每个字体大小自动计算。它应该是这样的：

#yourDiv::first-letter {
   margin-left: -0.12em;
}

Answer 3

空白之所以存在是因为它是标题。您可以通过执行以下操作将其向左对齐：

margin-left: -10px;