Porcentajes

Si han consultado la sección sobre Cascada y Herencia entenderán la diferencia entre valores especificados y valores computados. Veamos como funciona esta diferencia en los porcentajes.

Las siguientes reglas de estilo:

P {font-size: 12pt}
B {font-size: 200%}

Se aplican a esta página:

<P>Este párrafo tiene un elemento hijo 
  <B>que a su vez tiene
    <I>otro elemento hijo</I> que hereda
  </B>su propiedad "font-size". 

Se aplican a esta página:

Este párrafo tiene un elemento hijo que a su vez tiene otro elemento hijo que hereda su propiedad "font-size".

Aquí se debe observar lo siguiente: <I> es hijo de <B> que a su vez es hijo de <P>. Cada hijo hereda las propiedades de su padre. Entonces <I> heredaría "font-size: 200%" de su padre <B> y su texto debería tener el doble de tamaño que el de su padre.

Pero vemos que ambos tienen igual tamaño. Esto es porque, en realidad, <I> no hereda el porcentaje (200%) sino el valor computado de "font-size" de <B> (o sea, 24pt).