Line-height issue

HTML & CSS
1

Howdy.
It was suggested I move this post here.
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?
The issues has to do with text blocks as there are few images on the site.
Thanks a bunch.

2

Most likely line-height was not the actual cause, but it was rather a band aide fix :).

If you come post your page we could more easily tell you (it will also need the fix you had removed, along with a detailed explanation of the problem area)

3

Thanks for the reply.
No need to post all the code here as it’s a large page and my discovery involved two header elements. h2 and h3. Here is the css before and then after for the h2 selector.
The following code without a line-height set will render ten pixels above the letters and 10px below. Thus if you wanted to have a margin of 25 above that element then only 15px should be set to the top margin. The line height adjust according to the font-size so with smaller fonts this can go unnoticed. With my case, having a large font and fighting with setting the margin is what lead me to discover this line-height default. I’ve learned that all of the block level elements with text in them receive a default line-height from browser

#panel .border h2 {
	padding: 0;
	margin: 0 auto 25px;
	font-size: 35px;
	letter-spacing:5px;
	color:#787878;
	text-shadow: 0 1px 1px #fff;
}

Here is the local fix.

#panel .border h2 {
	padding: 0;
	margin: 0 auto 25px;
	font-size: 35px;
	line-height:65%;
	letter-spacing:5px;
	color:#787878;
	text-shadow: 0 1px 1px #fff;
}

Here is the global fix.


body {
	line-height:0;
}

This allows me more control over my layout. Giving me the true 25px top margin without having line-height factored in. However, I still am fighting with the questions. Is there a more efficient way?