Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto.
Elegir la unidad de medida correcta en CSS es una de las decisiones más importantes para crear diseños flexibles, adaptables y, sobre todo, accesibles.
Todas las medidas se indican como un valor numérico seguido de una unidad (ej. 16px), y son un pilar fundamental junto a otros valores como colores o funciones.
Valores en CSS
Hay gran variedad de valores CSS, algunos de ellos muy usuales y otros que rara vez nos encontraremos.
- Valores numéricos: Valores de longitud para expresar el ancho de elementos, de bordes, o tamaño de fuentes; también enteros sin unidades para expresar anchos de línea o veces que se repite una animación.
- Porcentajes: Se usan para expresar tamaño o longitud — relativos por ejemplo al ancho y alto del contenedor previo o al tamaño de fuente predeterminado.
- Colores: Para expresar colores de fondo, de texto, etc.
- Coordenadas: Para expresar la posición relativa de un elemento desde, por ejemplo, el margen superior izquierdo de la pantalla.
- Funciones: Para expresar imágenes de fondo o el degradado de la imagen de fondo.
Tipos de medidas en CSS
Las unidades de medida en CSS se dividen en dos grandes grupos: absolutas y relativas.
1. Unidades absolutas: el mundo de la precisión fija
Las unidades absolutas, como su nombre indica, tienen un tamaño fijo que no depende de otro valor de referencia. Son predecibles, pero muy poco flexibles para el diseño adaptable.
En este grupo encontramos:
cm(centímetros)mm(milímetros)in(pulgadas)pt(puntos)pc(picas)px(píxeles)
De todas ellas, para el diseño de pantallas, la única que realmente nos interesa en la práctica moderna es el píxel (px).
px (Píxeles): Representa un punto en la pantalla del dispositivo. Aunque su tamaño físico real puede variar según la densidad de la pantalla, en el contexto de CSS se comporta como una unidad fija.
¿Cuándo usarlas?
Hoy en día, su uso es limitado. Son adecuadas para valores que no deben escalar y necesitan una precisión fina, como el grosor de un borde o el desplazamiento de una sombra.
.caja-fina {
border: 1px solid #333; /* Un borde fino y nítido */
}
Lenguaje del código: PHP (php)Se debe evitar usar px para tamaños de fuente (font-size) y espaciados principales si se busca un diseño accesible que respete las preferencias del usuario.
2. Unidades relativas: flexibilidad y adaptabilidad
Las unidades relativas definen su valor en relación con otra medida. Son la base del diseño moderno, ya que permiten que los diseños se ajusten y escalen fluidamente. Se pueden agrupar en varias categorías:
a) Unidades relativas a la tipografía: em y rem
Estas unidades son clave para la tipografía y los espaciados escalables.
em: Es una unidad relativa que depende del contexto.- Para la propiedad
font-size,1emes igual alfont-sizedel elemento padre. - Para otras propiedades (como
padding,margin,width),1emes igual alfont-sizedel propio elemento. - Problema: Su principal desventaja es el "efecto de composición". Si anidas elementos con
font-sizeenem(ej.1.2emdentro de otro1.2em), los valores se multiplican, lo que puede hacer que el tamaño final sea difícil de predecir.
- Para la propiedad
rem(Root EM): Es relativa alfont-sizedel elemento raíz (la etiqueta<html>).- Ventaja principal: ¡Previsibilidad y accesibilidad!
1remsiempre será igual al tamaño de fuente del<html>(por defecto,16pxen la mayoría de navegadores). Si el usuario cambia el tamaño de fuente en la configuración de su navegador, todo tu diseño definido conremescalará de forma coherente. - Recomendación:
remes la opción preferida para la mayoría defont-sizey para espaciados (margin,padding) y dimensiones de componentes que deben escalar de forma global y accesible, ya que evita el problema de composición deem.
- Ventaja principal: ¡Previsibilidad y accesibilidad!
html {
font-size: 100%; /* Equivale a 16px por defecto. ¡Buena práctica! */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16px = 40px */
}
.tarjeta {
padding: 1.5rem; /* 1.5 * 16px = 24px */
}Lenguaje del código: PHP (php)b) Unidades relativas al viewport: vw y vh
Estas unidades son relativas a las dimensiones de la ventana gráfica (viewport) del navegador.
vw(Viewport Width): 1vw = 1% del ancho del viewport.vh(Viewport Height): 1vh = 1% de la altura del viewport.vmin: El menor valor entre1vwo1vh.vmax: El mayor valor entre1vwo1vh. ¿Cuándo usarlas? Para elementos que deben estar directamente ligados al tamaño de la ventana, como secciones a pantalla completa. CSS.hero-section { height: 100vh; /* La sección ocupa toda la altura visible de la pantalla */ }
c) Unidades de consulta de contenedor: cqi y cqb (¡la revolución de los componentes!)
Esta es una de las adiciones más importantes al CSS moderno. Permiten que un elemento responda al tamaño de su contenedor padre, no solo al viewport. Esto es esencial para crear componentes verdaderamente autónomos y reutilizables.
Para usarlas, primero debes definir un elemento como contenedor de consulta:
.contenedor-padre {
container-type: inline-size; /* Habilita las consultas basadas en el ancho */
}
Lenguaje del código: PHP (php)Después, puedes usar las unidades relativas a ese contenedor en sus elementos hijos:
cqi(Container Query Inline-size): 1cqi = 1% del ancho del contenedor. Esta es la unidad recomendada.cqb(Container Query Block-size): 1cqb = 1% de la altura del contenedor.- Existen también
cqw,cqh,cqmin, ycqmax. Se prefieren las unidades lógicas (cqi,cqb) porque se adaptan a diferentes modos de escritura.
¿Cuándo usarlas?
Cuando quieres que la tipografía o los espaciados dentro de un componente escalen con el tamaño del propio componente, sin importar dónde se coloque en la página.
<code>.mi-tarjeta { container-type: inline-size; } </code>
<code>.mi-tarjeta h2 { /* El tamaño de la fuente será el 10% del ancho de .mi-tarjeta */ font-size: 10cqi;<span style="background-color: initial; font-family: inherit; font-size: inherit; text-align: initial; color: initial;"> }</span></code>Lenguaje del código: PHP (php)Si ahora colocas .mi-tarjeta en una columna ancha o en una barra lateral estrecha, su <h2> se adaptará automáticamente.
Más información sobre las unidades de consulta de contenedor.
3. Tipografía fluida: combinando unidades con clamp()
Usar vw o cqi directamente para font-size puede crear textos ilegibles en extremos (muy pequeños o muy grandes). La función clamp() es la solución moderna para esto. clamp(MIN, VAL, MAX) te permite definir un valor mínimo, un valor preferido (que escala) y un valor máximo.
h1 {
/* Tamaño mínimo: 1.5rem
Tamaño ideal que escala: 1rem + 2vw
Tamaño máximo: 3rem */
font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}
Lenguaje del código: PHP (php)Esto crea una tipografía perfectamente fluida que escala con el viewport, pero solo entre los límites que has definido, garantizando la legibilidad.
Más información sobre las unidades con clamp().
Conclusión: ¿qué unidades usar?
No hay una única respuesta, pero en el CSS moderno, hay una jerarquía de recomendaciones muy clara:
- Usa
rempara la mayoría de tus necesidades: Es la mejor opción parafont-size,padding,marginy dimensiones de componentes para un sistema globalmente escalable y accesible. - Usa
cqi(ocqb) para la tipografía y espaciados dentro de componentes que necesitan ser autónomos y adaptarse a su propio espacio. - Usa
vwyvhsolo para elementos que deben ocupar una porción específica de la ventana del navegador. - Usa
emcon cuidado, para casos específicos donde necesitas que el tamaño de algo sea relativo alfont-sizede su contexto inmediato. - Usa
pxsolo para valores fijos que no deben escalar, como bordes finos.
Dominar estas unidades y saber cuándo aplicar cada una te dará el control para crear diseños web modernos, robustos y verdaderamente adaptables.
