Setting line-height in inline-box made height weird in CSS

Question

The box's height is 130px, couldn't figure out why?

.box {
  line-height: 120px;
  background-color: #cd0000;
  color: #fff;
}

.content {
  display: inline-block;
  line-height: 20px;
}

<div class="box">
  <div class="content">1<br />2<br />3<br />1</div>
</div>

Set .box's height 120px,it will be 120px, but I don't know why the 130px happen?

Answer 1

Add vertical-align:top to the inline-block element. The extra space is due to the default baseline alignment.

.box {
  line-height: 120px;
  background-color: #cd0000;
  color: #fff;
}

.content {
  display: inline-block;
  vertical-align: top;
  line-height: 20px;
}

<div class="box">
  <div class="content">1<br />2<br />3<br />1</div>
</div>

Your element is 80px tall (4 x 20px of its line-height). Its baseline is the last line of text so by default that last line will be somehow at the center of the linebox.

The last line is 20px tall and placed at the center so 10px below and 10px above. To the 10px above you add the remaining 60px and you get 70px above the center.

You line-height is equal to 120px so half of it is 60px. We are missing 10px to be able to place 70px so we increase the height up to 130px

Add another line and the height will be 150px

.box {
  line-height: 120px;
  background-color: #cd0000;
  color: #fff;
}

.content {
  display: inline-block;
  line-height: 20px;
}

<div class="box">
  <div class="content">1<br />2<br />3<br />1<br />1</div>
</div>

Remove a line and the height will be 120px and notice how the content no more touch the top because we have enough space to place 50px (10px + 2*20px) inside 60px (120px/2)

.box {
  line-height: 120px;
  background-color: #cd0000;
  color: #fff;
}

.content {
  display: inline-block;
  line-height: 20px;
}

<div class="box">
  <div class="content">1<br />2<br />3</div>
</div>