影响下一个DIV定位的字体大小

Question

我遇到了这个奇怪的问题，font-size合一div会影响下一个div的定位。我的代码是：

<div class="first">
  1
</div>  
<div class="second">
  2
</div>  

和CSS：

.first{
    border: 1px blue solid;
    display: inline-block;
    font-size: 47px;
    height: 80px;
    width: 105px;
}

.second{
    border: 1px red solid;
    height: 80px;
    width: 105px;
    display: inline-block;
}

结果是：

第二个div未与第一个div水平对齐。

jsfiddle here。如果我删除字体大小，它们都水平对齐。为什么会这样？

Answer 1

更改 vertical-align value 默认 baseline

您好，现在就像这样定义您的first和second班级vertical-align:top

.first,.second{vertical-align:top;}

演示

.first{
    border: 1px blue solid;
    display: inline-block;
    font-size: 47px;
    height: 80px;
    width: 105px;
}

.second{
    border: 1px red solid;
    height: 80px;
    width: 105px;
    display: inline-block;
}
.first, .second{vertical-align:top;}

<div class="first">
  1
</div><div class="second">
  2
</div>  

Answer 2

当您更改font-size或height时，会发生基线更改。在CSS中提供vertical-align：

.first, .second {vertical-align: top;}

<强>段

.first {
  border: 1px blue solid;
  display: inline-block;
  font-size: 47px;
  height: 80px;
  width: 105px;
}
.second {
  border: 1px red solid;
  height: 80px;
  width: 105px;
  display: inline-block;
}
.first,
.second {
  vertical-align: top;
}

<div class="first">
  1
</div>
<div class="second">
  2
</div>

预览

小提琴：https://jsfiddle.net/pgrwg0dw/