Mladen Adamovic Mladen Adamovic - 2 years ago 79
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download