Left space on first letter CSS

问题

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?

回答1:

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.

回答2:

PX units are not such a good choice in this case. I recommend using EM unit if you working with font attributes like line-height etc. Because it's automatically calculated for each of font-size. It should look like this:

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

回答3:

Try using first letter

h1:first-letter {
    margin-left: -10px
}

http://jsfiddle.net/w25j9L7o/1/

回答4:

The white space is there because it is a header. You can align it to the left by doing:

margin-left: -10px;

回答5:

You can use Gill Sans font. It is very similar to Lato. Problem is in Lato font itself not in Css.

Here is your link for GillSans

回答6:

You can get kern.js from kernjs.com and edit your front kerning, like they said on their website "click and drag to adjust your kerning, line-height, letter placement, When you're done, copy the generated CSS and use it in your own stylesheet"

回答7:

This problem was driving me crazy so here is an elegant solution that uses ::first-letter selector. For example I was able to fix my spacing issue by adding:

#yourDiv::first-letter {margin-left:-5px;}

Hope this works for others that were in my situation. Here is a link for more information: http://www.w3schools.com/cssref/sel_firstletter.asp

回答8:

Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.

The best way to solve this is to set all the margins and paddings on the html and body tags to 0:

Add this CSS:

html,body {
    font-family:Lato;
    margin:0px;
    padding:0px;
}

p{margin-left: 11px;}

DEMO

来源：https://stackoverflow.com/questions/28809771/left-space-on-first-letter-css