顶部对齐具有不同字体大小的两个跨距

Question

我有以下代码：

<div>
  <span class='foo' style='font-size: 10px'>Foo</span>
  <span class='blah' style='font-size: 25px'>Blah</span>
</div>

我想对它们进行顶部对齐。在那一刻，Foo不是顶部对齐，因为Blah的字体大小更大。我该如何解决这个问题？

这是codepen

Answer 1

您可以使用

实现此目的

span {
    vertical-align: top;
}

DEMO

正如您所看到的，使用绿色背景，两个div都使用它们的顶角对齐。如果你想进一步对齐，你可以添加display: inline-block，以便对它们进行样式化并添加填充：

span {
  vertical-align: top;
  display: inline-block;
}
span.foo {
  margin-top: 3px;
}

DEMO #2

这次看起来他们的顶部是对齐的（即使第一个实际上低于第二个）。