¿Qué son y para que sirven?

De forma muy frecuente, en CSS necesitaremos utilizar tamaños. Para indicarlo de una forma apropiada, necesitaremos conocer las unidades que podemos utilizar en CSS para definir dichos tamaños. Existen multitud de unidades. Quizás las más populares son unidades como px (píxels) o % (porcentajes), entre muchas otras.

Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width (propiedad que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de unidades que pueden utilizarse.

Tipos de unidades

Cuando estamos empezando a trabajar con CSS, mi consejo suele ser entender primero las unidades de tamaño fijo (o absolutas) y utilizar alguna de ellas, como por ejemplo, el píxel: px. Una vez se entiendo su uso, vamos pasando a utilizar unidades más complejas.

A continuación una lista de las diferentes unidades que existen en CSS, y sus diferencias:

Como se puede ver, existen más de 60 unidades en CSS, sin embargo, lo verdaderamente importante es entender las categorías, que son sólo 8. Una vez se comprenden bien, entender las diferentes unidades es mucho más sencillo.

Consejo: Cuando se especifican valores de unidades iguales a 0, como por ejemplo 0px, 0em o 0%, podemos omitir las unidades y escribir simplemente 0, ya que las unidades son redundantes y no son necesarias.

Unidades absolutas

Las unidades absolutas son las más sencillas. Se trata de unidades que son siempre iguales a una unidad de medida física. La más conocida con diferencia es el píxel, una medida fácil para comenzar a trabajar en CSS.

.container {
  width: 300px;
  height: 200px;
  background: indigo;
}

<div class="container"></div>

Sin embargo, conforme avanzamos en el mundo del diseño y desarrollo web, la unidad px se nos puede quedar corta. Sobre todo cuando tenemos en cuenta que necesitamos un tipo de unidad que se adapte dependiendo de ciertos factores.

► Más sobre unidades absolutas

Unidades relativas

A medida que avanzamos en CSS, es recomendable comenzar a utilizar variables relativas a la tipografía o fuente. Estas son un tipo de unidad que no establece un tamaño fijo, sino que el tamaño depende de ciertas características de la tipografía actual, como el tamaño, interlineado u otras.

Unidades relativas a la fuente

Una de las unidades más conocidas dentro de este apartado es la unidad em. La explicamos en profundidad en el artículo sobre unidades relativas a fuentes.

.container {
  font-size: 1em;
}

Estas unidades son interesantes para tener tamaños más prácticos para utilizar en nuestros diseños. En el siguiente artículo puedes ver más información sobre ellas.

► Más sobre unidades relativas a fuentes

Unidades relativas al viewport

Al conocer ciertos apartados relacionados con el resposive o el diseño web en dispositivos móviles, es muy probable que necesitemos otras unidades un poco más potentes que las anteriores. Por ejemplo, una muy común es necesitar dar un tamaño a un elemento en relación al tamaño de ancho (o de alto) de la ventana del navegador.

body {
  margin: 0;    /* Reset */
}

.container {
  width: 50vw;
  height: 50vh;
  background: indigo;
}

<div class="container"></div>

La unidad vw o vh son ejemplos claros de estas situaciones. Estas unidades dependen exclusivamente del viewport (región visible del navegador). Las explicamos en profundidad en el siguiente artículo.

► Más sobre unidades relativas al viewport

Unidades relativas al padre

En casos mucho más concretos, podemos tener a nuestra disposición unidades como cqw o cqh. Estas unidades dependen del tamaño de ancho o de alto de un elemento contenedor específico, y las veremos más adelante en un apartado donde explicamos las CSS Container Queries.

► Más sobre unidades de CSS Container Queries

Unidades relativas al grid

También existe una unidad fr que veremos más adelante. Dicha unidad, se caracteriza en que sólo puede ser utilizada en contextos donde estemos diseñando con un layout de tipo grid. Significa fracción restante y es una forma muy cómoda y sencilla de dar tamaño a varios elementos teniendo en cuenta el espacio sobrante.

► Más sobre Grid y la unidad fr

Unidades de dirección

En CSS, en ciertos casos, necesitaremos indicar una dirección específica, y para ello haremos uso de las unidades de dirección. A pesar de que la unidad deg (grados) es la más utilizada, existen otras como grad (grados centesimales), rad (radianes) o especialmente turn, menos utilizadas pero que pueden resultarnos mucho más fácil para calcular direcciones.

Si quieres ver una explicación real donde se utilizan en CSS, echa un vistazo a la función linear-gradient(), utilizadas para crear gradientes o degradados en una cierta dirección.

► Direcciones de gradientes en la función linear-gradient

Unidades de duración

Cuando necesitemos controlar el tiempo o la duración que debe tardar en realizarse algo, como por ejemplo una transición o animación, serán muy útiles las unidades de tiempo. La más conocida es s (segundos), pero también existe la unidad ms (milisegundos).

.container {
  width: 600px;
  transition: width 1s linear;
}

En el ejemplo anterior, definimos que la transición debe tener una duración de 1 segundo. Las explicamos en profundidad en uno de los dos siguientes apartados.

► Más sobre Transiciones CSS y Animaciones CSS

Otras unidades

Existen algunas otras unidades, menos utilizadas actualmente en el día a día, pero que pueden utilizarse en el futuro para definir frecuencias (cantidad de ocurrencias por segundo) o resoluciones (puntos por pulgada, cm o píxel):

• Unidades de frecuencia: como hz o khz.
• Unidades de resolución: como dpi, dpcm, dppx.

Es interesante tener en cuenta que existen una serie de funciones para hacer cálculos con unidades CSS. Son las funciones calc(), min(), max() o clamp(), entre otras. Las veremos más adelante, en el capítulo de funciones CSS.