How to vertically align text withing its line? (vertical-align is not working)

[caes95]

Here is the example of what I'm talking about, you need to zoom-in to see the problem http://jsfiddle.net/54NEa/1/\[code\]<div id="top">SomeText</div><div id="middle">SomeText</div><div id="bottom">SomeText</div>div{ display: inline-block; background-color: red; font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif; font-size: 10px; line-height: 10px;}div.top {vertical-align:top;}div.middle {vertical-align:middle;}div.bottom {vertical-align:bottom}\[/code\]the line is 10px, but text doesn't fill it completely, it has extra padding - in FF the padding is below and in Chrome its above, regardless of vertical-align property. This varies somewhat with font, but it never really fills its line-height completely, it "wiggles". Any ideas how to fix that font in one position relative to its line regardless of browsers? Im making a small css button and I need to make sure my line is exactly 10px in height and the text is also precisely 10px in height, so it always look the same.