垂直对齐基线和边距

Question

所以我有一些看起来像这样的HTML / CSS：http://jsfiddle.net/nw2Ym/1/

CSS：

.heading {
    font-size: 24px;
}

.badge {
    font-size: 10px;
    padding: 3px 10px;
    background: gray;
    color: #fff;
    vertical-align: baseline;
    margin-bottom: 3px;
    display: inline-block;

}

HTML：

<div>
    <span class="heading">Testing Stuff</span>
    <span class="badge">OMG!</span>
</div>

Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, 

我想要的是将徽章的底部与旁边文本的底部对齐。相反，文本的底部与徽章中文本的底部对齐。

那时我以为我会按照填充物的大小推动徽章，所以我增加了一个余量。它不是向上推动标签，而是最终推下它下面的东西。为什么会这样？另外，如何对齐徽章以使底部（填充后）与文本对齐？

Answer 1

我认为你正在寻找

vertical-align: text-bottom;

Here's a fiddle