what am I missing here?

[cybershot]

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?

[chrisburton]

@cybershot Link? Code?

[stvheld]

Browsers implement their own styling sometimes. Try using a css reset to see if that solves it. http://meyerweb.com/eric/tools/css/reset/

[chrisburton]

@cybershot Can I get the full code?

[joshuanhibbert]

@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.

[chrisburton]

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]

Although it’s hard to tell without context, I would agree with @ChristopherBurton; it’s probably not that much of an issue.

[chrisburton]

@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.

[chrisburton]

@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.

[joshuanhibbert]

@cybershot I think the confusion is due to it being considered abnormal behavior, which it is not. Sure, it doesn’t equate to leading in print design, but that is how it is specified (http://www.w3.org/TR/CSS2/visudet.html#line-height):

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.

[wolfcry911]

edit// wow, this thread saw a lot of action since I started posting. note to self, complete a post before catching some of the ballgame…

[chrisburton]

@cybershot I doubt the line-height looks consistent.

[joshuanhibbert]

@cybershot Totally agree with @ChristopherBurton; decreasing the line-height below that of the font-size is very rarely a good idea as it messes with the vertical rhythm of everything below it.

[chrisburton]

@joshuanhibbert Did you edit the 2nd paragraph? https://css-tricks.com/forums/discussion/comment/73205#Comment_73205

If not, I think I misread what you had said.

[joshuanhibbert]

@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.

@cybershot I have done up a jsFiddle to demonstrate what I am talking about: http://jsfiddle.net/joshnh/szY9W/

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.

[Author]

Posts