css - 垂直对齐基线和边距

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