Dr.House: em Vererbung

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!

  1. Om nah hoo pez nyeetz, Dr.House!

    em entspricht dem berechneten Wert des ‘font-size’ Attributs des Elements, in dem es benutzt wird.

    Abhilfe wäre, die Angaben für border-radius, height, width zu halbieren.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bar und Barren.

    1. Om nah hoo pez nyeetz, Matthias Apsel!

      Abhilfe wäre, rem zu verwenden.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Schwan und Schwangerschaft.

      1. Om nah hoo pez nyeetz, Matthias Apsel!

        Abhilfe wäre, rem zu verwenden.

        Wäre bei "rem" das Root-Element immer "body"? In dem Beispiel würde mir das helfen, aber ich verwende ein komplexes Layout, bei dem ich teilweise die EM-Basis verstelle, um variable Container in verschiedenen Szenarien verwenden. Der Container weiß dann selbst nicht, in welcher Umgebung er steckt und kann sich nur am Parent-Element orientieren. Mich wundert es, dass "em" überall so definiert ist, dass es genau das tut, aber dann verändert ein font-size auf gleicher Ebene die EM-Verhältnisse.

        1. Om nah hoo pez nyeetz, Dr.House!

          Wäre bei "rem" das Root-Element immer "body"?

          Im HTML-Kontext html.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kart und Kartoffelsalat.