I keep seeing this issue and I am not sure what the problem is. I have an h1 tag, margin:0 padding 0; yet the h1 tag sits 1px below the top of the content which makes it 1px below the box on the left which is bad. Why is it doing that?
@cybershot As far as I can tell, that is expected behavior. CSS centers text vertically, placing space above and below to create the appropriate line-height. You can check this by changing the line-height to a fairly small number (i.e. 12px). The best way to solve it would be to use a negative top margin, as you can’t change just the top part of the line-height on its own (another option being a smaller line-height and larger bottom-margin, but this causes problems with multiple lines).
Keep in mind though: depending on the typeface, and the way each browser renders said typeface, it may be slightly off. The space rendered above and below each line of text is calculated using the metrics of a typeface, and this can vary greatly.
You can set the h1 line-height to .75 but it seems pointless and would disrupt the overall line-height (below the h1). I agree with Josh about the negative margin but I think it’s one of those details that might bug you but it’s actually quite fine and something no one would notice.
@joshuanhibbert I don’t think I’ve ever seen a typeface’s cap height adding space like that. From what I’ve seen, the top of the capital glyph will butt itself up against the cap height. Sometimes even go above it (such as the overshoot of an ‘O’). I agree with your initial response that it is due to the browser.
@cybershot, I think @joshuanhibbert explained it although I can’t verify it as fact because I’m not that advanced in development or browser rendering. However, I’ve had this issue as well and it seems to happen cross-browser.
Still for each glyph, determine the leading L to add, where L = ‘line-height’ – AD. Half the leading is added above A and the other half below D, giving the glyph and its leading a total height above the baseline of A’ = A + L/2 and a total depth of D’ = D + L/2.
So in layman’s terms: If there is a positive difference between the capital height of the type, and the line-height, that difference is split in half, of which each half is placed above and below each line of type.
@ChristopherBurton I save a comment before proof reading, and then making slight changes. So you might have caught it in the minute before I have proof read it? I know it’s a strange way to comment, it’s just something I’ve always done.
As you can see, the margin-top fix (on the left) doesn’t mess with the baseline like the line-height fix does. Also, each line of type sits in the middle of its line, according to the specifications, despite being totally different to how it is done in print design.