Mladen Adamovic Mladen Adamovic - 7 months ago 23
HTML Question

Why table cell which could fit into 32px height grow over specified height?

SOLVED.

This is an example:

HTML:

<table>
<tbody>
<tr style="height: 100%;">
<td class="lefttd">
<a href="#mmenu" style=""><img src="http://www.numbeo.com/images/Menu1.svg"></a>
</td>
<td></td>
<td class="righttd"><img src="http://www.online-utility.org/icons/gear_64.png" style="margin-right: 0.5em;">Online-Utility.org </td>
</tr>
</tbody>
</table>


CSS:

table {
border-bottom: 1px solid black;
border-spacing: 0;
background-color: #bcf;
width: 100%;
}

table > tr, table > tr > td {
padding: 0;
margin: 0;
border: 0;
border-spacing: 0;
}

.lefttd {
height: 100%;
vertical-align: middle;
}

.righttd {
width: 95%;
height: 32px;
text-align: right;
font-size: 22px;
line-height: 30px;
vertical-align: middle;
}

a.mmenu {
border: 0;
text-decoration: none;
background-color: #aaa;
height: 100%;
vertical-align: middle;
display: inline-block;
}

img {
width: 32px;
border: 0;
text-decoration: none;
vertical-align: middle;
}


https://jsfiddle.net/adamovic/sw6c3z91/

In Chrome I see this table computed with height 35px... What causes this table to grow height more than 32px and how to fix it?

Answer

Add vertical-align: middle; to your image

<img src="http://www.online-utility.org/icons/gear_64.png" style="width: 32px; margin-right: 0.5em; vertical-align: middle;">

Also, you shouldn't be inlining styles like this. It's a terrible practice. Uses classes and stylesheets instead.

Edit: you can try a few other values too. It looks like vertical-align:bottom might work even better. It appears with the font size and line height that that will get you closer to 32px. With middle it's at about 33px