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;

ここにフィドルがあります