How to align vertically a `inline-block` element inside a `<td>` element?

Question

I can't manage to align vertically a inline-block <span> element inside a <td> element (which has its default display: table-cell style).

Both elements have fixed sizes: the <td> is 24px tall and so is the`.

I would expect both elements to have the same rendered size, as none of them has a margin or a padding. However, it seems the <td> is somehow taller than expected and I can't figure out why.

Example in this jsfiddle.

Do you know why that happens and how to "fix" it ?

Answer 1

Add font-size:0 to td class

td {
    height: 24px;
    vertical-align: middle;
    background-color: red;
    margin: 0;
    padding: 0; font-size:0
}

Updated Demo http://jsfiddle.net/NxmhC/1/

Answer 2

Align the span:

span.foo {
    display: inline-block;
    height: 24px;
    width: 16px;
    background-color: lime;
    margin: 0;
    padding: 0;
    vertical-align: top;
}