CODEWITHSUNDEEP
csshtml
ereOn
ereOn

Reputation: 55736

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

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 ?

Upvotes: 3

Views: 2241

Answers (2)

Mo&#39;in Creemers
Mo&#39;in Creemers

Reputation: 1149

Align the span:

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

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

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/

Upvotes: 7

Related Questions