为何未设置样式的span会随.btn元素顶部对齐？

这是因为行内元素（包括<span>这类inline元素和.btn这类inline-block元素）处于同一个**行框（line box）**中，vertical-align属性控制的是元素在该行框内的垂直位置，具体逻辑如下：

• .btn是inline-block元素，设置vertical-align: top后，它的顶部边缘会对齐到当前行框的顶部边缘。
• <span>默认是inline元素，vertical-align默认值为baseline（基线对齐）。但行框的高度由最高的元素（也就是高度100px的.btn）决定，行框的基线会被.btn的布局推到接近行框底部的位置。
• 由于<span>自身高度远小于行框高度，它的顶部会自然贴合行框的顶部，视觉上就和按钮一起顶部对齐了。

如果要让<span>回到预期的基线对齐状态，可以给<span>单独设置vertical-align: baseline，或者让它独占一行（比如添加<br>标签，或者给<span>设置display: block）。

原代码 #

CSS

.btns {
  text-align: center;
}

.btn {
  text-decoration: none;
  border: 1px solid black;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin: 5px;
  padding: 5px;
  height: 100px;
  width: 500px;
  line-height: 2em;
  vertical-align: top;
}

HTML

<div class="btns">
  <span>Lorem ipsum dolor sit amet.</span>
  <a href="https://www.google.com" class="btn" id="ggl">button1</a>
  <button class="btn" id="fb">button2</button>
</div>

内容的提问来源于stack exchange，提问作者Naresh Lohar