Table cell height in terms of font size with CSS

Question

I have a table (a calendar, notably). I want to make the calendar not look ugly when nothing is written in for any of the dates, so I want the minimum size of a cell to be equal to four times the font height. (That is, if I have a calendar row with nothing in it, and a calendar row with four lines of text, I want them to be the same size).

Everywhere says to use 'em'. However, I tried using '4em' for my 12pt font and it was nowhere close:

td.day {
    padding: 2px;
    font-size: 12pt;
    width: 14.3%;
    height: 4em;
    vertical-align: top;
}

I counted the pixels exactly, and a 12pt font of the particular font I'm using,

font-family: verdana, arial, "sans-serif";

has a height of 22px. This isn't very flexible, however... is there any better way to do this?

Thinking about it more, I'm sure the 'em' unit correctly tells me the font's height. It just doesn't take into account the line spacing or the padding or anything else of that sort. Is there any way to do this that would?

Answer 1

5.5 em works fine, instead of 4em.

Answer 2

You have to take into account your line-height multiplier. For your td element, if you pick a font-size of 12pt, you must also assign a line-height. For example, if you wanted a line-height of 18px with your 12pt font size:

td.day {
    font-size: 12pt;
    line-height: 1.5;
}

Just be sure not to use a unit like em or px to designate a line-height, since it is a multiplier of your font-size. Your line-height would now be 18px, or if you want to use ems, 1.5em. Now, if you want to assign a height of four lines, you would use 6em.