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?
<div class="post"> <div class="date"> <span class="month">Jun</span> <span class="day">23</span> </div><!--END date--> <div class="post-content"> <h1>HELP US CLEAN UP THE SHORE</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Etiam commo do dui eget wisi. Nullam rhoncus aliquam metus. Etiam dictum tincidunt diam. Quis sautem id vel eum iure reprehenderit qui in ea voluptate velit esse ...</p> </div><!--ENd post-content--> <hr /> </div><!--END post-->
@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.
I agree that it's not a huge issue but finding a solution does increase ones understanding of coding all together. I see no reason as to why this is happening. I wonder if it is just the fact that I am using @font-face to generate the text?
@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.
@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.
@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.
the strange thing was that when I removed the line-height altogether, the h1 text jumped half way outside the containing div. So it sat about 15 pixels higher than it should have. If anything, I expected it to sit right at the very top of the containing div.
@cybershot It would be helpful if you could give us a live example of what you're talking about (in full context). There may be another overriding style that we aren't aware of.
Although the top of the heading doesn't line up with the top of the image, it still looks perfectly fine, and the vertical rhythm is completely natural.
yea, the only problem is that I am making this template for sale on themeforest and they have a policy about things not lining up correctly. That 1px gap could be enough to destroy the layout as far as the reviewers over there are concerned. Also, that gap and not knowing what causes it bugs the crap out of me and I just wanted to fix it. I managed to line it up with smaller line height. Not a perfect solution but it worked. I would have prefered to find out what was causing it and fit it that way.
I have tried, above, to explain why it is happening, and why it isn't actually a bug. But perhaps I have misunderstood what you were actually referring to?
two div floated left.
h1 which is the help in the picture above
that gives me the above photo. Just can't figure out why it sits one pixel lower
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.
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.
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...
If not, I think I misread what you had said.
@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.
Although the top of the heading doesn't line up with the top of the image, it still looks perfectly fine, and the vertical rhythm is completely natural.