Si se considera el siguiente ejemplo:
La regla CSS anterior indica que los párrafos deben mostrar un margen de
anchura igual a 1em. Como se trata de una unidad de medida relativa, es
necesario realizar un cálculo matemático para determinar la anchura real de
ese margen.
La unidad de medida em siempre hace referencia al tamaño de letra
del elemento. Por otra parte, todos los navegadores muestran por defecto el
texto de los párrafos con un tamaño de letra de 16 píxel. Por tanto, en este
caso el margen de 1em equivale a un margen de anchura 16px.
A continuación se modifica el ejemplo anterior para cambiar el tamaño de
letra de los párrafos:
p { font-size: 32px; margin: 1em; }
El valor del margen sigue siendo el mismo en unidades relativas (1em) pero su
valor real ha variado porque el tamaño de letra de los párrafos ha variado.
En este caso, el margen tendrá una anchura de 32px, ya
que 1em siempre equivale al tamaño de letra del elemento.
Si se quiere reducir la anchura del margen a 16px pero manteniendo
el tamaño de letra de los párrafos en 32px, se debe utilizar la
siguiente regla CSS:
p { font-size: 32px; margin: 0.5em; }
El valor 0.5em se interpreta como "la mitad del tamaño de
letra del elemento", ya que se debe multiplicar
por 0.5 su tamaño de letra (32px x 0.5 = 16px). De la misma forma,
si se quiere mostrar un margen de 8px de anchura, se debería
utilizar el valor 0.25em, ya que 32px x 0.25 = 8px.
La gran ventaja de las unidades relativas es que siempre mantienen las
proporciones del diseño de la página. Establecer el margen de un elemento
con el valor 1em equivale a indicar que "el margen del
elemento debe ser del mismo tamaño que su letra y debe cambiar
proporcionalmente".
En efecto, si el tamaño de letra de un elemento aumenta hasta un valor
enorme, su margen de 1em también será enorme. Si su tamaño de
letra se reduce hasta un valor diminuto, el margen de 1em también
será diminuto. El uso de unidades relativas permite mantener las
proporciones del diseño cuando se modifica el tamaño de letra de la página.
El funcionamiento de la unidad ex es idéntico a em, salvo que
en este caso, la referencia es la altura de la letra x minúscula,
por lo que su valor es aproximadamente la mitad que el de la unidad em.
Por último, las medidas indicadas en píxel también se consideran relativas,
ya que el aspecto de los elementos dependerá de la resolución del
dispositivo en el que se visualiza la página HTML. Si un elemento tiene una
anchura de 400px, ocupará la mitad de una pantalla con una resolución
de 800x600, pero ocupará menos de la tercera parte en una pantalla con
resolución de 1440x900.
Las unidades de medida se pueden mezclar en los diferentes elementos de una
misma página, como en el siguiente ejemplo:
body { font-size: 10px; }
h1 { font-size: 2.5em; }
En primer lugar, se establece un tamaño de letra base de 10 píxel
para toda la página. A continuación, se asigna un tamaño
de 2.5em al elemento <h1>, por lo que su tamaño de
letra real será de 2.5 x 10px = 25px.
El valor de la mayoría de propiedades CSS se hereda de padres a hijos. Así
por ejemplo, si se establece el tamaño de letra al
elemento <body>, todos los elementos de la página tendrán el
mismo tamaño de letra, salvo que indiquen otro valor. Sin embargo, el
valor de las medidas relativas no se hereda directamente, sino que se hereda
su valor real una vez calculado. El siguiente ejemplo muestra este
comportamiento:
body {
font-size: 12px;
text-indent: 3em;
}
h1 { font-size: 15px }
