vertical-align: why it does not work for me?

Question

Here is html:

<div style="height: 100px">
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>

http://jsfiddle.net/CaS5r/1/

Why vertical-align property does not work in this example? Do I use it incorrectly?

Answer 1

I'm unsure what you want to achieve.

See this fiddle: http://jsfiddle.net/CaS5r/4/

It does work, but it only aligns to it's siblings.

some debugging

span {
    outline: 1px solid red;
}
div {
    background: yellow;
    height: 100px;
} 

HTML

<div >
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:middle;">middle</span>
    <span style="vertical-align:baseline;">baseline</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>

UPDATE

you can see it better if the font is bigger (e.g. 50px) http://jsfiddle.net/CaS5r/5/

UPDATE

You probably want to use display: table;

http://jsfiddle.net/CaS5r/7/

Then it does what you expect