line height problems

[pepe_lepew]

Hello;

I am trying to test some line heights and for some reason, it is not working. I even went to the extreme of setting to 1px and it is not working. I have included a link with the css insiude the html for easier reading and any help would greatly be appreciated.

http://www.pepelepew1962.x10.mx/corners.html

[Paulie_D]

Perhaps you could define what the ‘problems’ are.

[pepe_lepew]

Ok, from what I understand, line height is the distance from the top of 1 line to the top of the next line. With a line height of 1px, the text should practically be overwriting itself. Or ???

[Paulie_D]

The line height can’t affect the actual height of the text…just the space around it….usually.

Again, my question is…what is the problem?

[pepe_lepew]

The problem is I need to drink more to understand this. Is this true … 2 lines of text, same 16px, with a line height of 1px would practically overwrite themselves?

As for my problem … I want the “XXX” part to be large, say H1 size, with the “TITLE” smaller, say h3, but tucked underneath with very little line space between them. I could make an image and add it to the page if my explanation sux.

[pepe_lepew]

Okay, that makes sense … I needed more text to show it was working properly. I guess the problem is more the distance between paragraphs in this case. I have a temp fix that I can at least play with. THANK YOU !!!

[chrisburton]

Keep in mind, creating a fixed line-height of 1.5x the font-size won’t always look appropriate. It is more visual than set with calculation.

@ChrisP

> Edit: you could accomplish what you’re after by using a negative bottom margin on the h1 tag.

Or set a smaller line-height to the h1.

[chrisburton]

It depends on how the font renders, honestly. I couldn’t exactly say with your example unless I have a visual reference.

Plus, some people use 1.4x the font-size, some use 1.8x. It all depends visually. And I’m not a firm believer when it comes to baseline grids on the web.

[chrisburton]

Which you can, in return, use a positive margin to bring it back down. Doesn’t negative margins cause inconsistencies in some browsers?

[chrisburton]

Take a look at the “Bugfixes” section. That’s what I was referring to. However, I wasn’t aware of the fix so using a negative margin would ultimately work. So I would agree with your solution.

[Author]

Posts