当我垂直对齐一个锚标记和一个具有相同类的按钮时，为什么跨度也与顶部对齐

Question

我原以为跨度不会对齐 为什么即使我没有定位它，span 标签也会对齐到顶部，我刚刚将属性应用于 .btn 类元素

.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;
}

<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>

Answer 1

Span 元素是内联元素，因此它们只占用显示自身所需的空间。您不能应用高度和任何与高度相关的 css 属性。如果您希望它们起作用，请确保使用块元素（例如 div）

我建议您使用弹性框将所有这些元素保持在同一行，如示例中所示

有关 Flexbox 的更多信息：Flexbox 的 MDN 文档

有关内联元素的更多信息：内联内容的 MDN 文档

.btns {
  text-align: center;
  display: flex;
}

.lorem {
  display: flex;
  align-items: 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;
}

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