当第一个跨度与高度相同时，为什么第一个跨度位于第二个跨度的底部？

Question

我有这个HTML：

＆＃13;

＆＃13;

.one{
  display: inline-block;
  width: 80px;
  border: 1px solid;
}

.two{
  display: inline-block;
  width: 100px;
  border: 1px solid;
}

＆＃13;

<span class="one"> Explanation: </span>
<span class="two">There is some explanation about something. There is some explanation about something</span>

＆＃13;

＆＃13;

＆＃13;

如您所见，EXPLANATION的字词位于.two框的底部。我怎样才能把它放在最顶端？这是预期的结果：

Answer 1

vertical-align: top;救援！

.one{
  display: inline-block;
  width: 80px;
  border: 1px solid;
  vertical-align: top;
}

.two{
  display: inline-block;
  width: 100px;
  border: 1px solid;
}

<span class="one"> Explanation: </span>
<span class="two">There is some explanation about something. There is some explanation about something</span>

Answer 2

垂直对齐属性的默认值为baseline，这就是为什么第一个跨度可以在基线上查看，因为下一个跨度的高度更大。

要使其在顶部进行查看，您需要将vertical-align属性设置为顶部：

.one{
  display: inline-block;
  width: 80px;
  border: 1px solid;
  vertical-align: top;
}

Answer 3

span是inline元素，默认情况下为vertical-align: baseline。

添加vertical-align: top以覆盖它。

.one {
  display: inline-block;
  width: 80px;
  border: 1px solid;
  vertical-align: top;
}
.two {
  display: inline-block;
  width: 100px;
  border: 1px solid;
  vertical-align: top;
}

<span class="one"> Explanation: </span>
<span class="two">There is some explanation about something. There is some explanation about something</span>

Answer 4

使用^\s*(print)

这里有article解释CSS默认基线。

vertical-align: top;

Answer 5

默认情况下，所有inline和inline-block元素都会根据父元素的baseline进行对齐。

来自WikiPedia：

  

基线是大多数字母“坐”的线，下面的下划线延伸。

要解决此问题，您可以vertical-align: top明确使用display: inline-block。

.one,
.two {
  display: inline-block;
  vertical-align: top;
  border: 1px solid;
}

.one {
  width: 80px;
}

.two {
  width: 100px;      
}

<span class="one"> Explanation: </span>
<span class="two">There is some explanation about something. There is some explanation about something</span>