Verwendung von em für Header

Question

Ich bin neu in der Verwendung von em. Ich habe bisher immer px benutzt, aber es ist Zeit weiterzuziehen. Ich bin mit meinen Kopfzeilen fest. Ich habe ein H2 und ein H6 mit dem gleichen Styling

font-size:1.2em; 
line-height:1.2em; 

bekomme Wenn ich beiden Header in demselben Mutterelement setzte sie in einer anderen Größe angezeigt werden. Wie ist das möglich? Sind sie relativ zu dem Elternteil oder sind sie relativ zu der Standardschriftgröße von ihnen selbst.

Dank

http://jsfiddle.net/SBAHa/1

Answer 1

Basierend auf dem Link (joets.be/test/index.html) gesendet, der Grund, warum dies passiert ist, weil Sie ein Anker-Tag innerhalb der Überschriftenelemente.

Die <a> innerhalb der H2 hat Schriftgrößen Stile daran befestigt, während der eine in der H6 nicht. Wenn Sie Ihr 1.2em-Styling auf die <a> anstelle der Überschriften anwenden, dann wird das funktionieren.

So im Wesentlichen, dies zu tun:

h2 a, h6 a{ font-size:1.2em; line-height:1.2em; }

Edit: Ich habe in der CSS-Datei sah selbst, können Sie entfernen Sie einfach das "h2 a" von der Linie 339?

Answer 2

Die tatsächliche Größe eines EM des Elements wird in Bezug auf die Schriftgröße des übergeordneten Elements berechnet.

ein Blick auf diesen großen Artikel, die mich verstanden relativ mesures geholfen: http://alistapart.com/article/fluidgrids