43

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!

EverTheLearner
  • 7,040
  • 16
  • 57
  • 72

6 Answers6

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.

Dennis Traub
  • 50,557
  • 7
  • 93
  • 108
  • 1
    Correction. line-height has nothing to do with where a second line of text is and is only based on the inline box itself. – Rob Oct 01 '11 at 00:15
  • Here's another tutorial with example from [css-tricks](https://css-tricks.com/almanac/properties/l/line-height/), if that makes more sense. – Alan Dong Apr 03 '15 at 20:34
27

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.

DwB
  • 37,124
  • 11
  • 56
  • 82
  • Landed on SO after reading [this](https://github.com/csswizardry/CSS-Guidelines). DwB's answer should have way more upvotes. – Scott Silvi Feb 24 '14 at 19:59
2

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.

Stephan van Hoof
  • 225
  • 1
  • 9
1

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

Alexis Gamarra
  • 4,362
  • 1
  • 33
  • 23
1

Easily understand by seeing this example.

.height
{
    height: 20px;
}

.lheight
{
    line-height: 15px;
}

.lheightbigger
{
    line-height: 35px;
}
<h2>Height</h2>
<div class="height">
  This is demo text. This is demo text.
  This is demo text. This is demo text. 
  This is demo text. This is demo text.
</div><br>
<h2>Line Height with less space</h2>
<div class="lheight">
  This is demo text showing line height example. This is demo text showing line height example.
  This is demo text showing line height example. This is demo text showing line height example.
  This is demo text showing line height example.This is demo text showing line height example.
</div>
<h2>Normal Text</h2>
<div>
  This is normal text.
  This is normal text.
  This is normal text.
</div>
<h2>Line Height with more space</h2>
<div class="lheightbigger">
  This is normal text. This is normal text.This is normal text.
  This is normal text. This is normal text.This is normal text.
  This is normal text. This is normal text.This is normal text.
</div>
Rohit Tagadiya
  • 3,373
  • 1
  • 25
  • 25
0

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.

steveax
  • 17,527
  • 6
  • 44
  • 59