height vs line-height styling

html css styling
EverTheLearner picture EverTheLearner · Oct 1, 2011 · Viewed 27k times · Source

What is the difference between using these two when dealing with text that will never be more than a single line? They both can produce similar results on the screen from what I can see in regards to the elements on top or on the bottom of the element. Why use line-height at all if so? Height would make more sense to use.

Edit: An example of this a stylized button created from a div with text inside. This will never be multiline. So would line-height be needed for compatibility reasons? or anything I don't know about?

Thanks!

Answer

Dennis Traub picture Dennis Traub · Oct 1, 2011

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.

Related questions

Horizontal scroll on overflow of table

I have a basic table in a container. The table will have about 25 columns. I am trying to add a horizontal scroll bar on overflow of the table and am having a really tough time. What is happening now, is …

Read More
Line break (like <br>) using only css

Is it possible in pure css, that is without adding additional html tags, to make a line break like <br>? I want the line break after the <h4> element, but not before: HTML <li> …

Read More
CSS or what? Forcing the text split into multiple lines

Forcing the text split into multiple lines when it reaches the maximum width of the #div. How can I do this? because, if I try to output data with 200 characters without spacing, I get the following: Result 1 (no spacing): aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... …

Read More