Dizzy heights

My latest project has taught me the downside of setting a height to an element. I wanted to add a background image to an h2 tag - just a small image to give the header a lift. It needed to be positioned just above and to the left of the text so in order to acheive the desired effect, I set some padding to the left so that the text would sit free of the image, and a height to the tag plus some padding to shift the text down a fraction. I got the desired effect which worked across browsers and thought no more of it. Until, I wanted to take a check of the page with the font size increased. Yikes - suddenly the header text overlapped the text below it in an ugly and illegible fashion. I had an inkling it was the height that was causing the problem and so removed that attribute from the stylesheet. Problem resolved. I then tweaked the padding fractionally and still got the appearance I was after. Adding height to the element was completely unecessary as padding alone enabled me to manipulate the text around the background image. When the font was enlarged, there was no ugly overlapping issue and the page behaved as expected. SO - I will think twice before needlessly adding a height to an element.