Does line-height in css work in a single line of text?

This is my css styling of my header

h2{ background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; }

Now, when i type some word in it, the word suppose to be out of the image because the line-height is same as the height of the text , but it is still inside it, why?

To answer your question, yes, line-height works on a single line of text. Given a certain line-height, the browser will attempt to render the text in the middle of that line-height. So if the element has a height of 46px and a line-height of 46px, and assuming the font-size is 30px, there will be (46-30)/2 = 8px open above and below the text.

So the line-height property, when used with only one line of text, can be used to keep text vertically centered by setting it to the same value as height.

Just use: padding-top: 46px , please note line-height will NOT be added to the height read more.

EDIT: when I say it won't be added, I mean it can't be understood as: Final height = height + line-height

Try using margin-top: -46px;. That will work for sure.