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/