CSS - Line height property, how it works (simple)

Question

So in this simple example I have as final result:

This is a very simple question but I sim

Answer 1

This doesn't work because line-height is specific to text and not to actual heights of elements like divs. I would suggest using height and not line-height when your subject is not in fact text.

Answer 2

Using the line-height property to 100px means that the text is going to be vertically centered in the middle of a line with a 100px height. Meaning it will be placed around 50px. Setting the margins to 50px will give you a similar result but you might notice its not exactly centered.

Answer 3

The simple answer is that with line-height the character will be in the vertical middle of the line, so a line with a height of 100px has the text in the middle of, thus 50px.

Answer 4

I think line-height is just what is sounds like. It would be different if it was just half of the height, as you would have to account for the font-size, etc. line-height just makes a blocky thing with a height of 100px, in your case, and centers the text within that.

Basically, line-height adds the value ((desired height) - (font-size)) / 2 to the top and bottom of the text, while adding margins does not account for that.

Answer 5

When you give an element a line-height of 100% (in your example, this equates to 100px), the text is placed in the middle vertically of a line that's 100px tall.

Answer 6

Essentially the line-height helps to set the "leading" and "half-leading". The 100px accounts for the total height of the element and the text is being "vertically aligned" within that area. Half is going above and half below.

This explains better than I. http://www.w3.org/TR/CSS2/visudet.html#line-height