Question

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?

Answer 1

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.