Dr.House: em Vererbung

Beitrag lesen

Hallo,

ich habe folgendes Beispiel und mir ist nicht ganz klar, warum der zweite Kreis größer ist, obwohl ich nur die Schriftgröße ändern wollte. Normalerweise sollten sich doch alle em-Angaben auf das Eltern-Element (body) beziehen. Kann ich das irgendwie verhindern, dass die font-size Angabe auf gleicher Ebene die anderen em-Angaben beeinflusst, oder muss ich den Text in ein Kind-Element auslagern?

  
<html>  
<head>  
  <title>EM Test</title>  
  <style type="text/css">  
  	body{font-size:1em;}  
         .circle{width:10em;height:10em;border-radius:5em;font-size:1em;color:#fff;line-height:10em;text-align:center;background:#000}  
         .circle2{width:10em;height:10em;border-radius:5em;font-size:2em;color:#fff;line-height:10em;text-align:center;background:#000}  
  </style>  
</head>  
<html>  
<body>  
	<div class="circle">Hello</div>  
	<div class="circle2">World</div>  
</body>  
</html>  

Danke!