1em + 1em = 2em?

[Quabbe]

Moin,

wenn ich p eine font-size von 1em zuweise und mit p strong dasselbe mache, ist der mit strong ausgezeichnete Text doppelt so groß. Warum ist das so?

HTML:
<p>Der gestiefelte <strong>Kater</strong></p>

CSS:
p { font-size:1em; }
p strong { font-size:1em; }

Wenn ich strong die Größe 1.5em geben will, darf ich ihm dann in diesem Fall nur 0.5em zuweisen?


Grüße,
Quabbe

 

[xXxPeterPanxXx]

Nein p.strong ist wirklich nur 1em groß, es täuscht wahrscheinlich, weil durch strong der Text dicker wird.

mfG xXxPeterPanxXx

 

[Quabbe]

Hmmm. Merkwürdig. Ich habs grad getestet.

p { font-size:1em; }
p strong { font-size:1em; }

ergibt in beiden Fällen dieselbe Schriftgröße! Soweit richtig.
Aaaaber...

p { font-size:2em; }
p strong { font-size:2em; }

ergibt für strong die doppelte Größe? Irgendwas stimmt doch da nicht ...

 

[Asterixus]

Ist normal.
2em bedeutet, doppelt so groß wie das Elternelement.

 

[Quabbe]

Ach, so ist das! Schön, dass ich das auch mal erfahre. Danke. ;)

Dann muss ich mich wohl nochmal durch selfHTML lesen...

 

[Efchen]

p { font-size:2em; }
p strong { font-size:2em; }

ergibt für strong die doppelte Größe? Irgendwas stimmt doch da nicht ...

Na klar, zuerst gibst Du dem Textabsatz eine Größe von "2em". Danach definierst Du, dass alle <strong> innerhalb von <p> "2em" sein sollen. "em" ist ja eine relative Größe. Das heißt, hier wird die Größe des <p> nochmal verdoppelt.

Hat die Standardschriftgröße z.B. 20px, dann ist Dein <p> 40px groß und Dein <strong> 80px.