Вертикальное выравнивание базовой линии и поля

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