Unidades CSS
Aprende a dominar las unidades absolutas y relativas en CSS. Descubre cuándo usar píxeles, porcentajes, em, rem y más para construir diseños web escalables, accesibles y adaptables.
Las unidades en CSS son esenciales para definir medidas como el tamaño de texto, márgenes, rellenos, anchos, altos, y otros estilos. Existen diferentes tipos de unidades que se pueden usar dependiendo del contexto y los resultados que desees lograr.
A continuación, exploraremos las unidades más comunes, divididas en dos categorías principales: unidades absolutas y unidades relativas.
Unidades absolutas
Las unidades absolutas representan medidas fijas que no dependen del contexto o del elemento padre. Son ideales cuando necesitas mantener un tamaño constante, sin importar el dispositivo o el tamaño de la pantalla.
px (píxeles)
El píxel es la unidad más común en CSS. Representa un punto en la pantalla del dispositivo.
p {
font-size: 16px; /* Sets a fixed font size of 16 pixels */
margin: 20px; /* Defines a consistent 20-pixel margin */
}
Cuándo usar px
- Para elementos donde necesitas control preciso sobre el tamaño.
- Ideal para bordes, márgenes pequeños o iconos.
Enlace de referencia: MDN: px
cm, mm, in (centímetros, milímetros, pulgadas)
Estas unidades son útiles para estilos que se verán impresos, ya que están basadas en medidas del mundo real.
@media print {
body {
margin: 2cm; /* Defines a margin of 2 centimeters */
}
}
-
1
in= 2.54cm= 25.4mm - Poco comunes en proyectos digitales.
Enlace de referencia: MDN: cm, mm, in
pt, pc (puntos y picas)
Históricamente usadas en tipografía impresa:
-
pt: 1 punto = 1/72 de pulgada. -
pc: 1 pica = 12 puntos.
h1 {
font-size: 12pt; /* Sets the font size to 12 points */
}
Rara vez usadas en desarrollo web, pero relevantes en impresión.
Unidades relativas
Las unidades relativas calculan el tamaño en función de un elemento de referencia, como el elemento padre, la raíz (<html>) o el tamaño de la fuente.
em (basado en el tamaño de fuente del elemento padre)
Una de las unidades más importantes y flexibles en CSS. 1em equivale al tamaño de fuente del elemento padre.
/* If the base size is 16px */
p {
font-size: 1em; /* Text will be 16px */
}
h1 {
font-size: 2em; /* Text will be 32px (2 times the parent size) */
}
Cuándo usar em
- Para espaciados relacionados con la tipografía.
- En proyectos donde quieres que los tamaños escalen dinámicamente.
Cuidado: Las unidades em pueden ser acumulativas. Si un hijo usa em, dependerá del tamaño del padre inmediato, no del raíz.
Enlace de referencia: MDN: em
rem (basado en el tamaño de fuente del elemento raíz)
rem es similar a em, pero en lugar de depender del elemento padre, depende del tamaño de la fuente del elemento raíz (<html>).
html {
font-size: 16px; /* Base font size */
}
p {
font-size: 1rem; /* Always 16px */
}
h1 {
font-size: 2rem; /* Always 32px */
}
Ventaja: A diferencia de em, no acumula valores. Esto lo hace más predecible y fácil de manejar.
Enlace de referencia: MDN: rem
Diferencia clave entre em y rem
Un error común es confundir em y rem. Recuerda:
-
emes relativo al tamaño del elemento padre inmediato. -
remes relativo al tamaño del elemento raíz (<html>).
Ejemplo:
html {
font-size: 16px; /* Base size */
}
div {
font-size: 2em; /* 32px (relative to <html>) */
}
p {
font-size: 1.5em; /* 48px (relative to the div, which is 32px) */
}
Con rem:
p {
font-size: 1.5rem; /* Always 24px (16px x 1.5) */
}
Enlace adicional: MDN: Diferencias entre em y rem
% (porcentajes)
Los porcentajes son relativos al tamaño de su contenedor o contexto.
div {
width: 50%; /* Width is 50% of the parent element */
}
p {
font-size: 120%; /* Text size is 120% of the parent element */
}
Cuándo usar %:
- Para anchos y alturas en diseños fluidos.
- Para tamaños de fuente adaptables.
Enlace de referencia: MDN: %
Conclusión
Dominar las unidades CSS es fundamental para desarrollar proyectos con escalabilidad y consistencia. Recuerda elegir la unidad adecuada dependiendo del contexto:
- Unidades absolutas para valores fijos.
- Unidades relativas para diseños adaptables.
