在第一个字母的CSS留下空间 [英] Left space on first letter CSS

问题描述

我使用的是谷歌字体'拉托'，我有问题，标题和文本正确的左对齐...字体（当大）似乎有第一个字母kern空间，不会对齐左没有空格！

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

 < ; H1>你好< / H1> < p>您好，这是传送< / p> 
  

任何人都可以帮忙吗？ / p>

解决方案

好的，大家都说这是由于自动填充或页边空白造成的。看到这个小提琴为证据：

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

浏览器或CSS或DOM /浏览器级别的其他内容不会呈现前导空间。这是字体。 H glyph在它周围有一些内置的填充，字体越大，填充将越显着。

即使您使用负值余量来弥补：

1. 角色本身正在转移，其中包括空空间，这样空的空间也会滑落，影响布局。可见字符不会滑入空白区域，如果使用CSS来修复整个字符（可见和不可见），则会向左移动。




2. 您需要根据字体大小调整偏移量，或者根据基本百分比计算偏移量，以便偏移量随任何字体大小设置一起增长。

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

I am using the Google font 'Lato' and I am having problems with having title and text align properly to the left... The font (when large) appears to have a kern space on the first letter and wont align left without space!?

So here also a fiddle:

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

FIDDLE

Also, adding a negative value on the margin-left (magin-left:-10px) just seems like a terrible workaround... and this would not work overall for different font-sizes, unless individually adjusted as needed... surly there must be a better solution?

Can anyone help?

解决方案

Okay, everyone who says it's due to automatic padding or margins due to the line being a header is wrong. See this fiddle as evidence:

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

The leading space is not being rendered by the browser or the CSS or anything else at the DOM/Browser level. It is the font. The H glyph has some built-in padding around it, and the larger the font size, the more noticeable that padding will be.

Even if you use negative margins to compensate:

1. The character itself is shifting over, which includes the empty space, so that empty space will be sliding over as well, affecting layout. The visible character isn't sliding into the empty space, the entire character (visible and invisible) is shifting to the left if you use CSS to fix it.

2. You would need to adjust that offset based on the font-size or figure out the underlying percentage so that the offset grows with any font-size set.

Or you can just use a different font that doesn't have this characteristic.

这篇关于在第一个字母的CSS留下空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！