Höhe der Tabellenzellen in Abhängigkeit von der Schriftgröße mit CSS

Question

Ich habe eine Tabelle (vor allem einen Kalender). Ich möchte den Kalender nicht hässlich aussehen, wenn nichts in für eines der Daten geschrieben wird, so möchte ich die Mindestgröße einer Zelle gleich viermal die Schrifthöhe sein. (Das heißt, wenn ich eine Kalenderzeile mit nichts darin und eine Kalenderzeile mit vier Zeilen Text habe, sollen sie gleich groß sein).

Überall heißt es, man solle em . Ich habe jedoch versucht, mit 4em für meine 12pt Schriftart und es war nicht annähernd so:

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

Ich habe die Pixel genau gezählt und eine 12pt-Schrift der von mir verwendeten Schriftart verwendet,

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

hat eine height de 22px . Dies ist jedoch nicht sehr flexibel... gibt es eine bessere Möglichkeit, dies zu tun?

Wenn ich genauer darüber nachdenke, bin ich mir sicher, dass die em unit zeigt mir die Höhe der Schrift korrekt an. Es berücksichtigt nur nicht den Zeilenabstand oder die Auffüllung oder irgendetwas anderes in dieser Art. Gibt es eine Möglichkeit, dies zu tun, dass würde?

Answer 1

Sie müssen den Multiplikator für die Zeilenhöhe berücksichtigen. Wenn Sie für Ihr td-Element eine Schriftgröße von 12pt wählen, müssen Sie auch eine Zeilenhöhe zuweisen. Wenn Sie zum Beispiel eine Zeilenhöhe von 18 px bei einer Schriftgröße von 12 pt wünschen:

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

Achten Sie nur darauf, dass Sie keine Einheit wie em oder px zur Angabe der Zeilenhöhe verwenden, da diese ein Multiplikator der Schriftgröße ist. Ihre Zeilenhöhe wäre jetzt 18px, oder, wenn Sie ems verwenden wollen, 1,5em. Wenn Sie nun eine Höhe von vier Zeilen zuweisen möchten, würden Sie 6em verwenden.