Where is this space coming from?

[Fotiman]

I'm trying to create a block that has rounded top corners. Here's the html:

<h3><span>My Heading</span></h3>

My thought was that I could apply the top right image to the h3, and the top left image to the span, with the span butted up against the top left corner of the h3. But for some reason, I'm getting about 3px or so of space above and below my span so my image doesn't touch the top corner and the background color shows through.

I think this might have something to do with line-height, but I'm not sure what to set it at. Here's the style:

h3 
{ 
 background: #039 url(topright.gif) top right no-repeat; 
 margin: 0; 
 padding: 0 5px 0 0; /* Right padding = width of topright.gif */ 
} 
h3 span 
{ 
 background: #ccc url(topleft.gif) top left no-repeat; 
 margin: 0; 
 padding: 0 0 0 5px; 
} 

Note, the span is only a different color for debugging purposes.

Any suggestions?

[Fotiman]

I must have another style somewhere that's mucking up the works because pasting it into a blank document looks ok. I'm guessing it's line height, so now I just need to figure out how to override it with something that doesn't break it. :(