Question

Let’s say I want an img to be the same height as a line of text. Is there some way to set this up. My first thought was something like this:

<table>
    <td>
        <img src="pict.png" style="height: 1em"/>
        <img src="pict.png" style="height: 1em"/>
    </td>
    <td>
        The text<br/>
        The second line<br/>
    </td>
</table>

However, with that example, the height of the picture is less than the line. After a few lines the difference becomes very noticeable. Does anyone have any suggestions?

Also, it looks like for my font 1.15 em is about equal to the line height. Does this make sense to anyone?

Answer 1

your images are the same height as the line of text in your example. (see it here).
if it looks differently in your project, you can try setting line-height: 1em in your table, and make sure that font-size: 1em.

as for part two:
i hope this image helps explain the relationship between line-height and font-size: