CSS padding and font issue

I am having an issue with font settings and padding in CSS, I am a visual person and I bet开发者_StackOverflow社区 you are one too, so here's my problem: http://imgur.com/Wh441.png if you can solve it I will give you an upvote :O

What you're probably looking for is the line-height property.

Example: http://jsfiddle.net/J2g6y/

Ideally, I would let the header grow to have it's bottom pushed down by the growing buttons, but if I wanted to just adjust based on the text, I'd move the text up 1em (which is it's own height)

you can play with it here

Your code so far is somewhat needed, but based purely on the image I would do the following:

<div style="position: relative;">
    <img src="header.gif" />
    <div style="position: absolute; left: 10%; width: 10%; bottom: 0px;">Left text</div>
    <div style="position: absolute; left: 30%; width: 10%; bottom: 0px;">Middle text</div>
    <div style="position: absolute; left: 50%; width: 10%; bottom: 0px;">Right text</div>
</div>

Obviously without any code and only an image to go by I cant really help much - but this should get you well on the way to achieving this. At least some extra effort could have been put into the image, such as what elements you are using where and so on. You would also need to put the above into CSS - but this is just a quick, untested attempt to achieve what you want.