Thomas J.S.: font: em und %

Beitrag lesen

Hallo,

Ich würde gerne mal wissen, was der genaue Unterschied einer %-Angabe und einer em-Angabe für die Schriftgröße ist. Ich habe bisher leider noch kein Voll-Durchblick-Erlebnis gehabt:

% ist immer relative zu anderen definiereten angeben (höhe, breite etc.), wobei diese andere angabe eine eigenschaft des elements selbst oder des elternelements sein kann.
z.B:
div { font-size:10pt; }
th { font-size:15px; }
p { font-size:120%; }

sofern sich ein <p> in einem <div> befindet ist die größe der schrift im <p> 12pt (und nicht 120% !)
wenn ein <p> in einem <th> steht ist die schriftgröße im <p> 18px

wenn jetzt (wobei dies nicht richtig ist) ein <p> im <p> steht kann die schrfitgröße hier 14.4pt oder 21/22px (da 0.6px nicht gibt) betragen.

diese vererbung ist auch der grund für bernhards problem mit verschachtelten listen.

---

em  bezieht sich immer auf die errechnete größe des elements schriftart (errechnet wird z.B. vom browser)
wenn man aber em direkt in font-size verwendet gilt als ausgangsbasis für die errechnung die schriftgröße des elternelements.

z.B:
div { line-height:1.5em }
heisst, dass die zeilenhöhe 1,5x größer ist als die größe des schriftes im <div>

div { font-size:10pt; }
p { font-size:0.8em; }

die schriftgröße im <p> wenn <p> im <div> liegt beträgt 8pt.

Wo muss ich aufpassen? Was ist z.B. mit Abständen? Muss ich diese auch in em/% angeben oder kann es da Situationen geben, wo eine px-Angabe Ärger bringt?

für die bildschirmdarstellung kannst ruhig pixel nehmen.

grüße
thomas