html - 如何在同一行顶部对齐具有不同字体大小的两个单词？

Question

我需要显示两行不同字体大小的文本，一行接一行，以便它们的顶行处于相同的垂直位置，即:

我尝试使用 vertical-align: top，但没有成功。我得到的不是预期的结果:

是否有一些标准的方法可以达到预期的效果？

这是我的 HTML:

<div id="container">
    <span>TEXT</span> TEXT
</div>

和 CSS:

#container {
    font-size: 30px;
}

#container span {
    font-size: 16px;
    vertical-align: top;
}

Answer 1

一种方法是:

#container span {
    position: relative;
    top: 2px;
    }

调整 2px 以适应。