Line-height issue-CSS

Get Started
1

Howdy. I started a design where I wanted to have the upper level elements in a header have 25px margin between them, but I quickly realized that even though I had zeroed out the margin and padding there were still space between them. There are two h2 elements at the top with font sizes of 40px and 35px. I drew a red border around them and there was about 10 px on top and bottom. Fortunately I had recently worked on some line-height settings and it hit me that it was the line-height causing my angst. I went to work and set the line-height by percent to get it down to 0 so I could get the exact margins I wanted. This leads me to my questions. Is this a valid and efficient way to go about this? Is there another way? Is there a list of elements that have a line-height default in browser? Do I have to adjust the line-height in all block level elements to get close to pixel perfect?

Thanks a bunch.

2

That line height issue will occur when there is text content within the element, which includes whitespace as well.

If you have just an image within a block then the whitespace issue shouldn’t occur.

By the way, if you’re styling narrow blocks of image-based content then you’re almost certainly doing things wrong and making more work for yourself.

If you approach the people in the CSS Forum, they can advise you about how to achieve your desired end result not only with a minimum of work now, but more importantly in a way that reduces your work in the future.

3

Thanks for the reply and suggestion. Moved to CSS forum.