height vs line-height styling

If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).

Here is a fiddle that demonstrates this.

height = line-height + padding-top + padding-bottom

Assuming the text is smaller than the container:

Setting the line-height on the container specifies the minimum height of line-boxes inside it. For 1 line of text, this results in the text vertically centered inside the container.

If you set height on the container then the container will grow vertically, but the text inside it will start on the first (top) line inside it.

height is the vertical measurement of the container.

line-height is the distance from the top of the first line of text to the top of the second.

If used with only one line of text I'd expect them to produce similar results in most cases.

I use height when I want to explicitly set the container size and line-height for typographic layout, where it might be relevant if the user resizes the text.