Las unidades de medida son una de las partes más importantes de CSS, ya que se utilizan para definir la altura, anchura y márgenes de todos los elementos y para establecer el tamaño de letra del texto.
CSS divide todas las unidades de medida en dos grupos: absolutas y relativas. Las unidades relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
Las medidas, absolutas y relativas, se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).
Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente, lo que suele ser una fuente habitual de errores para los diseñadores que empiezan con CSS. Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos.
Unidades relativas
La unidades relativas son más flexibles que las unidades absolutas porque se adaptan más fácilmente a los diferentes medios. A continuación se muestra la lista de unidades de medida relativas y la referencia que toma cada una para determinar su valor real:
em, relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de1 emse puede aproximar por la anchura de la letraM"eme mayúscula") del tipo de letra que se esté utilizandoex, relativa respecto de la altura de la letrax"equis minúscula") del tipo de letra que se esté utilizandopx, (píxel) relativa respecto de la pantalla del usuario
Cuando se establece el tamaño de la letra, la unidad relativa más utilizada es em. En el siguiente ejemplo, se define el valor del tamaño de la letra de varios elementos utilizando la unidad em:
Cuando se utilizan unidades relativas, es imprescindible conocer la referencia que se toma para obtener el valor definitivo. En otras palabras, un tamaño de letra 1em o 3em no significan nada a menos que se conozca su valor de referencia.
Si se define el tamaño de letra de un elemento mediante la unidad em, su referencia es el tamaño de letra del primer elemento contenedor que tenga establecido un tamaño de letra. Si el elemento no se encuentra dentro de ningún otro elemento, entonces la referencia es el tamaño de letra del <body>.
En el siguiente ejemplo, los elementos interiores tienen el mismo tamaño de letra (1em). Sin embargo, como sus elementos contenedores tienen tamaños muy diferentes (0.9em y 1.5em) el tamaño de letra resultante es muy diferente:
Por otra parte, si se utiliza la unidad em para definir la anchura de un elemento, la referencia es el tamaño de letra del propio elemento. En el siguiente ejemplo, los dos elementos tienen la misma anchura (20em), pero como su tamaño de letra es muy diferente (1em y 2em) la anchura resultante también es muy diferente:
La unidad de medida ex se utiliza mucho menos que la unidad em, aunque el funcionamiento de ambas es idéntico. Por su parte, la unidad de medida píxel (px) sí que se utiliza de forma habitual y toma como referencia el tamaño de la pantalla del usuario.
Aunque los píxel normalmente sólo se utilizan para definir la anchura y altura de los elementos, también se pueden utilizar para establecer el tamaño de la letra, aunque en este caso se recomienda utilizar la unidad em:
Unidades absolutas
Las unidades de medida absolutas son completas, ya que sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados. A continuación se muestra la lista de unidades absolutas definidas por CSS y su significado:
in, del inglés "inches", pulgadas (1 pulgada son2.54centímetros)cm, centímetrosmm, milímetrospt, puntos (1 punto equivale a1 pulgada/72, es decir, unos0.35milímetros)pc, picas (1 pica equivale a12puntos, es decir, unos4.23milímetros)
A continuación se muestran ejemplos de utilización de unidades absolutas:
A pesar de que parecen más fáciles de comprender, las unidades absolutas se utilizan mucho menos que las unidades relativas. El motivo es que las unidades absolutas son adecuadas para medios impresos pero no lo son tanto para medios flexibles como una pantalla. De todas las unidades absolutas, los puntos (pt) es la única que se emplea ocasionalmente y casi siempre para definir el tamaño de letra para los medios impresos (print) de CSS.