1 2713

CSS-Tutorial – Größeneinheiten – Unterschied Pixel, Prozent, em

Heute möchte ich Euch den unterschied der verschiedenen Größeneinheiten erklären.

Wer sich mit HTML und CSS beschäftigt wird sehr früh auf die Größeneinheiten px, % und em stoßen.
Jeder hat sich dann gefragt, was beispielsweise ein EM sein soll. Das hat nichts mit Fussball zu tun.

Um sich an dieses Thema heranzutasten, beginnen wir mit einem ganz einfachen Text:

Beispielcode HTML:

<html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße.
 </body>
</html>

Diesem Text stellen wir jetzt einfach mal einen Text gegenüber, der die Größe von 26 Pixeln hat.

Ich werde bewusst den CSS Code in den Body integrieren. Anfängern fällt es so leichter, zu verstehen, was passiert.

Beispielcode HTML:

<html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße. <span style="font-size: 26px;">Zum Vergleich einen Text in der Größe 26px!</span>
 </body>
</html>

Sie sehen, daß der zweite Text wesentlich viel größer sein sollte, als der Standardtext.

Nun werden wir einen Text in einer prozentualen Größe darstellen:

Beispielcode HTML:

<html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße. <span style="font-size: 50%;">Zum Vergleich einen Text in der Größe 50%!</span>
 </body>
</html>

Der Text sollte nun genau halb so groß sein, wie der Standardtext.

Und nun werden wir mal 1em austesten:

Beispielcode HTML:

<html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße. <span style="font-size: 1em;">Zum Vergleich einen Text in der Größe 1em!</span>
 </body>
</html>

Hier hat sich nun nichts verändert. Man sieht, daß 1em gleich der Standardgröße des übergeordneten Containers ist. In unserem Beispiel ist dies der Body und somit die Standardgröße des HTML Dokumentes.

Ein Container kann das HTML Dokument, der Body Bereich, ein DIV, ein Span etc. sein.

Um das nun mal ein wenig zu konkretisieren, werden wir nun ein kleines Experiment durchführen. Nach diesem Beispiel wird jeder verstanden haben, was der Unterschied zwischen den Größen ist und wie die Abhängigkeiten zu den Containern sind.

Beispielcode HTML:

<html>
 <head>
 </head>
 <body>
   Dieser Text ist hat die Standardgröße. Der übergeordnete Container ist der Body!<br>
   <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des Bodys.</span>
   <span style="font-size: 2em;">und dieser Text ist doppelt so groß wegen der Einstellung font-size: 2em! Die 2em orientieren sich an ebenfalls an der Einstellung des Bodys</span>
 </body>
</html>

Um das Ganze noch mehr zu verdeutlichen, werden wir nun die Schirftgröße des Bodys mal ändern und schauen, was dann passiert:

Beispielcode HTML:

<html>
 <head>
 </head>
 <body style="font-size: 26px;">
   Dieser Text ist hat die Standardgröße. Der übergeordnete Container ist der Body!<br>
   <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des Bodys.</span>
   <span style="font-size: 2em;">und dieser Text ist doppelt so groß wegen der Einstellung font-size: 2em! Die 2em orientieren sich an ebenfalls an der Einstellung des Bodys</span>
 </body>
</html>

Es hat sich nun der komplette Text geändert.

Oftmals wird fälschlicherweise behauptet 1em sei die Standardgröße des Browsers. Das ist nur zur Hälfte korrekt. Sobald bei einem übergeordneten Container eine Größenänderung vollzogen wird, wirkt sich diese Änderung auf alle untergeordneten Texte und Container aus. Ich werde in diesem letzten Beispiel das noch weiter verdeutlichen. Hier werden Sie sehen, daß 1em nicht immer gleich groß ist.

Beispielcode HTML:

<html>
 <head>
 </head>
 <body>
   Dieser Text ist hat die Standardgröße. Der übergeordnete Container ist der Body!<br>
   <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des Bodys.</span><span style="font-size: 2em;">und dieser Text ist doppelt so groß wegen der Einstellung font-size: 2em! Die 2em orientieren sich an ebenfalls an der Einstellung des Bodys</span><br/><br><br/><br>
   Ab hier beginnt das DIV:<br/><br>
   <div style="font-size: 26px;">
      Und dieser Text ist ist nun 26px groß. Der übergeordnete Container ist das DIV-Element!<br>
         <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des DIV-Containers.</span>
   <span style="font-size: 2em;">und dieser Text ist 2,5 mal so groß wegen der Einstellung font-size: 2.5em! Die 2.5em orientieren sich an ebenfalls an der Einstellung des DIV-Containers</span>
  </div>
 </body>
</html>

Hier konnten Sie auch sehen, daß man em Angaben auch mit Nachkommastellen darstellen kann. Ein habes em entspricht 50%.

Ich behaupte, daß man anhand dieses Beispieles ganz deutlich sehen kann, woran sich die Größeneinstellungen orientieren und was sie bedeuten.