Hauteur de cellule de table en termes de taille de police avec CSS

Question

J'ai une table (un calendrier, notamment). Je veux que le calendrier ne soit pas moche quand rien n'est écrit pour aucune des dates, donc je veux que la taille minimale d'une cellule soit égale à quatre fois la hauteur de la police. (C'est-à-dire, si j'ai une ligne de calendrier sans rien, et une ligne de calendrier avec quatre lignes de texte, je veux qu'ils aient la même taille).

Partout dit d'utiliser em. Cependant, je 4em essayé d'utiliser ma police 12pt et il était nulle part près:

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

compté les pixels Je exactement, et une police 12pt de la police particulière que je utilise,

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

a un height de 22px. Ce n'est pas très flexible, cependant ... y a-t-il une meilleure façon de le faire?

Pensez-y plus, je suis sûr que l'unité em me dit correctement la taille de la police. Cela ne tient pas compte de l'espacement des lignes ou du rembourrage ou quoi que ce soit d'autre. Y a-t-il un moyen de faire cela?

Answer 1

Vous devez prendre en compte votre multiplicateur de hauteur de ligne. Pour votre élément td, si vous choisissez une taille de police de 12pt, vous devez également affecter une hauteur de ligne. Par exemple, si vous vouliez une ligne hauteur de 18px taille de votre police 12pt:

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

Juste être sûr de ne pas utiliser une unité comme em ou px pour désigner une ligne de hauteur, car il est un multiplicateur de votre taille de police. Votre hauteur de ligne serait maintenant 18px, ou si vous voulez utiliser ems, 1.5em. Maintenant, si vous voulez assigner une hauteur de quatre lignes, vous utiliserez 6em.