Maßeinheiten (Ausgangsgröße 16px, Grundeinstellungen im Browser)

Maßeinheit Beispiel Vergleich absolut
px (absolut) 24px 24px
em (relativ, Bezugsgröße Elternelement)* 1.5em 24px
% (relativ, Bezugsgröße Elternelement) 150% 24px
rem (HTML5, relativ, Bezugsgröße <body>) 150% 24px

* em hat als Bezugsgröße das Elternelement
Standardmäßig ist der <body> das Elternelement, dessen Schriftgröße ist die, die in der Schriftgrößeneinstellung des Browsers eingestellt ist (Standard:16px)

Beispiel: Wenn das Elternelement z.B. ein Div mit einer Schriftgröße von 12px ist und das Kindelement ein Absatz mit der Schriftgröße von 0.8em ist, ergibt sich die Schriftgröße 9,6px!

Div mit
font-size: 16px

Absatz mit
font-size: 1em
also Größe von 16px

Div mit
font-size: 12px

Absatz mit
font-size: 1em
also Größe von 12px

HTML:


		
<div class="div1">
	<h3>Div mit font-size: 16px</h3>
	<p>Absatz mit font-size: 1em, also Größe von 16px</p>
</div>	

<div class="div2">
	<h3>Div mit font-size: 12px</h3>
	<p>Absatz mit font-size: 1em, also Größe von 12px</p>
</div>	
		
		
		

CSS:


		
  .div1 {font-size:16px;} 
  .div2 {font-size:12px;} 
  
  p {font-size: 1em;}	
		
		

Die Größenangabe in em ist eine relative Angabe.
line-height: 1.2em bedeutet z.B.: Zeilenabstand von 120%
Wichtig:em bezieht sich immer auf die Größe des Elternelements!