height vs line-height styling

纵然是瞬间 提交于 2019-11-28 18:38:37

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.

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.

For practical purposes in the case you cite (never wrapping to more than one line) line-height will vertically center the text. Be careful about that assumption though as the user ultimately controls the font-size.

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 = line-height + padding-top + padding-bottom

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!