Porcentajes

Además de las unidades de medida absolutas y relativas, CSS define otra unidad de medida especial basada en los porcentajes. Un porcentaje se indica mediante un valor numérico seguido del símbolo % y siempre está referenciado a otra medida. Cada una de las propiedades de CSS que permiten indicar como valor un porcentaje, también define el valor al que hace referencia ese porcentaje.

Los porcentajes se utilizan habitualmente para establecer el tamaño de la letra y la anchura de los elementos. Cuando se utiliza para definir el tamaño de letra de los elementos, es equivalente a la unidad em, como se muestra en el siguiente ejemplo:

[0.8em] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[80%] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[1.2em] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[120%] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Si los porcentajes se utilizan para establecer la anchura de un elemento, su referencia es la anchura de su elemento contenedor. Si el elemento no se encuentra dentro de ningún otro elemento, su referencia es la anchura de la página entera.

En el siguiente ejemplo, los dos elementos <div> interiores tienen la misma anchura del 50%, pero como la anchura de su elemento contenedor es diferente, la anchura real de cada <div> interno también es diferente:

div { width: 50%; }
div { width: 50%; }