盒子的高度是130 px，不知道为什么？
.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的高度120px，就会是120px，但我不知道为什么会出现130px？
将vertical-align:top添加到inline-Block元素.额外的空间是由于默认基线对齐造成的.
.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>您的元素有80px高(其线高的4 x 20 px).它的基线是文本的最后一行，因此默认情况下，最后一行将以某种方式位于线框的中心.
最后一条线高20px，位于中心，下方10px，上方10px.将剩余的60px添加到上面的10px上，就会得到中心上方的70px.
你的line-height等于120px，所以一半是60px.我们缺少10px才能放置70px，因此我们将高度增加到130px
再加一条线，高度就会是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>删除一条线，高度将为120px，并注意内容不再接触顶部，因为我们有足够的空间将50px(10px + 2*20px)放入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>