px vs rem vs em vs vh: ¿Qué unidad CSS deberías usar realmente?
📷 Negative Space / Pexelspx vs rem vs em vs vh: ¿Qué unidad CSS deberías usar realmente?
CSS tiene más de 15 unidades de longitud y la mayoría de los desarrolladores usan las incorrectas. Una guía clara sobre cuándo usar cada unidad para un diseño responsive y accesible.
Introducción: Por qué importan las unidades CSS
Las unidades CSS determinan el tamaño de cada elemento en tu página web -- desde tamaños de fuente y espaciado hasta dimensiones de diseño y animaciones. Elegir la unidad correcta para el contexto correcto es una de las decisiones más importantes en el diseño web responsive y accesible.
Usar unidades incorrectas lleva a diseños que se rompen en diferentes tamaños de pantalla, texto demasiado pequeño para leer en móvil, y diseños que no respetan las preferencias de accesibilidad del usuario. Usar las unidades correctas crea interfaces flexibles y responsivas que se adaptan elegantemente a cualquier dispositivo y respetan la configuración del usuario.
Esta guía cubre cada unidad CSS que necesitas conocer en 2026, con consejos prácticos sobre cuándo y cómo usar cada una. Si necesitas convertir entre diferentes unidades de medida, prueba nuestra herramienta Convertidor de unidades.
Unidades absolutas
Las unidades absolutas representan medidas fijas. No cambian según el elemento padre, el viewport o la configuración del usuario.
Píxeles (px)
Los píxeles son la unidad absoluta más usada en el desarrollo web. Un píxel CSS corresponde a un píxel del dispositivo en una pantalla de densidad estándar, pero en pantallas de alta DPI (Retina), un píxel CSS puede mapearse a múltiples píxeles del dispositivo.
.box {
width: 300px;
height: 200px;
border: 1px solid #333;
padding: 16px;
}
Cuándo usar píxeles:
- Bordes y contornos (
border: 1px solid black) - Sombras (
box-shadow: 0 2px 4px rgba(0,0,0,0.1)) - Detalles visuales finos que no deben escalar
- Breakpoints de media queries (
@media (min-width: 768px)) - Elementos de tamaño fijo como iconos
Cuándo NO usar píxeles:
- Tamaños de fuente (usa
remen su lugar) - Espaciado y relleno (usa
remoemen su lugar) - Anchos de diseño (usa porcentajes,
fro unidades de viewport) - Cualquier cosa que deba responder a las preferencias de tamaño de fuente del usuario
Otras unidades absolutas
| Unidad | Descripción | Equivalente | Caso de uso |
|---|---|---|---|
px | Píxeles | 1px | Elementos de pantalla |
cm | Centímetros | 37,8px | Hojas de estilo de impresión |
mm | Milímetros | 3,78px | Hojas de estilo de impresión |
in | Pulgadas | 96px | Hojas de estilo de impresión |
pt | Puntos | 1,33px (1/72 de pulgada) | Hojas de estilo de impresión |
pc | Picas | 16px (1/6 de pulgada) | Hojas de estilo de impresión |
Nota: Las unidades físicas (cm, mm, in, pt, pc) solo tienen sentido en hojas de estilo de impresión. En pantallas, simplemente se convierten a píxeles usando la relación estándar de 96 DPI.
/* Hoja de estilo de impresión usando unidades físicas */
@media print {
body {
font-size: 12pt;
margin: 1in;
}
h1 {
font-size: 18pt;
margin-bottom: 0.5cm;
}
}
Unidades relativas: Basadas en fuente
Las unidades relativas se calculan en base a otro valor -- el tamaño de fuente del elemento padre, el tamaño de fuente raíz o las dimensiones del viewport. Son esenciales para el diseño responsive.
rem (em raíz)
rem significa "root em" y es relativo al tamaño de fuente del elemento raíz (<html>). Por defecto, los navegadores establecen el tamaño de fuente raíz en 16px, por lo que 1rem = 16px.
html {
font-size: 16px; /* Este es el valor predeterminado del navegador */
}
h1 {
font-size: 2rem; /* 32px */
margin-bottom: 1rem; /* 16px */
}
p {
font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
margin-bottom: 1rem; /* 16px */
}
.card {
padding: 1.5rem; /* 24px */
border-radius: 0.5rem; /* 8px */
}
Por qué rem es la mejor unidad para la mayoría de las cosas:
- Respeta las preferencias del usuario: Si un usuario establece el tamaño de fuente de su navegador a 20px (por accesibilidad), todos los valores basados en
remse escalan proporcionalmente - Consistente: A diferencia de
em,remsiempre referencia la raíz, por lo que no hay efecto compuesto - Predecible: Fácil de calcular -- si la raíz es 16px,
1.5remsiempre es 24px
El truco del 62,5% (usar con precaución):
/* Hace los cálculos rem más fáciles: 1rem = 10px */
html {
font-size: 62.5%; /* 62,5% de 16px = 10px */
}
body {
font-size: 1.6rem; /* Restaurar al equivalente de 16px */
}
h1 {
font-size: 3.2rem; /* 32px */
}
.spacing {
padding: 2.4rem; /* 24px */
}
Esta técnica facilita los cálculos pero puede causar problemas con componentes de terceros que asumen el tamaño de fuente raíz predeterminado. Úsala con cuidado.
em (Relativo al padre)
em es relativo al tamaño de fuente del elemento mismo (para propiedades relacionadas con la fuente) o al elemento padre (para otras propiedades). Esto lo hace útil para el escalado a nivel de componente, pero puede ser complicado debido al efecto compuesto.
.parent {
font-size: 18px;
}
.child {
font-size: 1.2em; /* 18px * 1.2 = 21.6px */
padding: 1em; /* 21.6px (relativo al propio tamaño de fuente) */
}
.grandchild {
font-size: 1.2em; /* 21.6px * 1.2 = 25.92px -- efecto compuesto! */
}
El problema del efecto compuesto:
/* Cada nivel anidado se hace más grande */
ul { font-size: 1.1em; }
/*
Nivel 1: 16px * 1.1 = 17,6px
Nivel 2: 17,6px * 1.1 = 19,36px
Nivel 3: 19,36px * 1.1 = 21,3px
Nivel 4: 21,3px * 1.1 = 23,4px
-- El texto sigue creciendo con el anidamiento!
*/
Cuándo em es genuinamente útil:
em brilla cuando quieres que el espaciado escale con el tamaño de fuente propio del elemento. Esto es particularmente útil para botones y componentes en línea:
/* Botón que escala proporcionalmente */
.button {
font-size: 1rem; /* Tamaño base desde la raíz */
padding: 0.5em 1em; /* Escala con font-size */
border-radius: 0.25em; /* Escala con font-size */
}
.button--large {
font-size: 1.25rem; /* Todo lo demás escala automáticamente */
}
.button--small {
font-size: 0.875rem; /* El padding y el radio también se reducen */
}
Comparación: rem vs. em
| Aspecto | rem | em |
|---|---|---|
| Referencia | Tamaño de fuente del elemento raíz | Tamaño de fuente del padre/propio |
| Efecto compuesto | No | Sí |
| Predecibilidad | Alta | Menor (depende del contexto) |
| Mejor para | Tamaños de fuente, espaciado, diseño | Escalado proporcional a nivel de componente |
| Accesibilidad | Respeta el tamaño de fuente raíz | Respeta el tamaño de fuente del padre |
ch (Ancho de carácter)
ch es igual al ancho del carácter "0" (cero) en la fuente actual. Es útil para limitar el ancho del texto a una longitud de línea legible.
/* Ancho de lectura óptimo */
.article-content {
max-width: 65ch; /* Aproximadamente 65 caracteres por línea */
margin: 0 auto;
}
/* Campo de entrada dimensionado para el contenido esperado */
.zip-code-input {
width: 6ch; /* Suficientemente ancho para 5 dígitos + algo de margen */
}
.phone-input {
width: 15ch;
}
Por qué ch importa para la legibilidad: La investigación sugiere que la longitud de línea óptima para leer es de 45-75 caracteres. Usar unidades ch facilita cumplir esto independientemente del tamaño de fuente.
ex (Altura x)
ex es igual a la altura del carácter minúscula "x" en la fuente actual. Raramente se usa directamente pero puede ser útil para alineación vertical precisa.
/* Centrar verticalmente un icono con texto */
.icon-inline {
height: 1ex;
vertical-align: middle;
}
lh y rlh (Unidades de altura de línea)
lh es igual al line-height calculado del elemento, mientras que rlh es igual a la altura de línea del elemento raíz.
/* Espaciar elementos por múltiplos de altura de línea */
.paragraph {
margin-bottom: 1lh; /* Un espaciado de línea */
}
.section {
margin-bottom: 2rlh; /* Dos alturas de línea raíz de espaciado */
}
cap, ic y otras unidades avanzadas
| Unidad | Descripción | Caso de uso |
|---|---|---|
cap | Altura de letras mayúsculas | Alinear con texto en mayúsculas |
ic | Ancho del ideograma CJK "agua" | Tipografía CJK |
lh | Altura de línea del elemento | Ritmo vertical |
rlh | Altura de línea raíz | Espaciado vertical consistente |
Unidades de Viewport
Las unidades de viewport son relativas al viewport del navegador (el área visible de la página web).
vw y vh (Ancho y alto del viewport)
/* Sección hero a pantalla completa */
.hero {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Tipografía responsive */
h1 {
font-size: 5vw; /* Escala con el ancho del viewport */
}
Importante: 100vh en navegadores móviles no tiene en cuenta la barra de direcciones y la navegación del navegador. Esto llevó a la creación de nuevas unidades de viewport.
El problema del viewport móvil
En los navegadores móviles, la altura del viewport cambia a medida que la barra de direcciones se muestra y oculta durante el desplazamiento. La antigua unidad vh se basa en el viewport más grande posible (barra de direcciones oculta), lo que provoca que el contenido se recorte cuando la barra de direcciones está visible.
dvh, svh, lvh (Altura de viewport dinámica, pequeña y grande)
CSS ahora proporciona tres variantes para manejar el viewport móvil:
/* svh: Altura de viewport pequeña (barra de direcciones visible) */
.safe-full-height {
height: 100svh; /* Nunca se recorta detrás de la barra de direcciones */
}
/* lvh: Altura de viewport grande (barra de direcciones oculta) */
.max-full-height {
height: 100lvh; /* Altura máxima cuando la barra está oculta */
}
/* dvh: Altura de viewport dinámica (cambia con la barra de direcciones) */
.dynamic-full-height {
height: 100dvh; /* Se ajusta en tiempo real */
}
Cuál usar:
svh: Valor predeterminado seguro -- el contenido siempre es totalmente visiblelvh: Cuando quieres la altura máxima posibledvh: Cuando quieres que la altura se anime con la barra de direcciones
Lo mismo aplica a las unidades de ancho: svw, lvw, dvw.
vi y vb (Viewport en línea y en bloque)
Estas unidades son conscientes del modo de escritura:
vi= tamaño del viewport en la dirección en línea (ancho para texto horizontal, alto para texto vertical)vb= tamaño del viewport en la dirección de bloque (alto para texto horizontal, ancho para texto vertical)
/* Diseño consciente del modo de escritura */
.container {
max-inline-size: 90vi; /* 90% del viewport en dirección en línea */
margin-block: 5vb; /* 5% del viewport en dirección de bloque */
}
vmin y vmax
vmin= el menor devwyvhvmax= el mayor devwyvh
/* Elemento cuadrado que cabe en cualquier viewport */
.square {
width: 50vmin;
height: 50vmin;
}
/* Tipografía que escala bien en ambas orientaciones */
h1 {
font-size: 8vmin; /* Funciona en portrait y landscape */
}
Comparación de unidades de viewport
| Unidad | Descripción | Barra de direcciones móvil |
|---|---|---|
vw | 1% del ancho del viewport | No afectada |
vh | 1% del alto del viewport | Usa el viewport grande |
svh | 1% del alto del viewport pequeño | Siempre segura |
lvh | 1% del alto del viewport grande | Altura máxima |
dvh | 1% del alto del viewport dinámico | Se anima con la barra |
vmin | Menor de vw/vh | Hereda de vh |
vmax | Mayor de vw/vh | Hereda de vh |
Porcentaje (%)
Los porcentajes son relativos a la propiedad correspondiente del elemento padre. La referencia cambia según la propiedad que estés configurando.
.parent {
width: 800px;
font-size: 20px;
line-height: 1.5;
}
.child {
width: 50%; /* 400px (50% del ancho del padre) */
margin-left: 10%; /* 80px (10% del ancho del padre) */
font-size: 80%; /* 16px (80% del tamaño de fuente del padre) */
padding: 5%; /* 40px (5% del ANCHO del padre, no del alto!) */
}
Trampa importante: Los porcentajes de padding y margin verticales se calculan en base al ancho del padre, no a su alto. Esto es útil para crear cajas con relación de aspecto (aunque la propiedad aspect-ratio ahora es preferida).
/* Viejo truco de relación de aspecto usando padding en porcentaje */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
}
/* Enfoque moderno */
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
Unidades de consulta de contenedor
Las unidades de consulta de contenedor son relativas al tamaño de un contenedor de consulta, permitiendo un diseño responsive verdaderamente basado en componentes.
cqw, cqh, cqi, cqb, cqmin, cqmax
.card-container {
container-type: inline-size;
container-name: card;
}
.card-title {
font-size: clamp(1rem, 4cqi, 2rem); /* Escala con el tamaño en línea del contenedor */
}
.card-description {
font-size: clamp(0.875rem, 3cqi, 1.125rem);
}
| Unidad | Descripción |
|---|---|
cqw | 1% del ancho del contenedor |
cqh | 1% del alto del contenedor |
cqi | 1% del tamaño en línea del contenedor |
cqb | 1% del tamaño de bloque del contenedor |
cqmin | Menor de cqi y cqb |
cqmax | Mayor de cqi y cqb |
La unidad fr (Fracción)
La unidad fr se usa exclusivamente en CSS Grid para distribuir el espacio disponible proporcionalmente.
.grid {
display: grid;
/* Tres columnas: 1 parte, 2 partes, 1 parte */
grid-template-columns: 1fr 2fr 1fr;
/* Con contenedor de 1200px: 300px, 600px, 300px */
/* Unidades mixtas: barra lateral fija, contenido flexible */
grid-template-columns: 250px 1fr;
/* Múltiples filas */
grid-template-rows: auto 1fr auto;
/* Encabezado, área de contenido flexible, pie de página */
gap: 1rem;
}
/* Grid responsive con unidades fr */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
fr vs porcentajes en Grid:
/* Estos parecen similares pero se comportan diferente */
.grid-percent {
grid-template-columns: 25% 50% 25%;
gap: 1rem;
/* Columnas + espacios > 100%, causando desbordamiento! */
}
.grid-fr {
grid-template-columns: 1fr 2fr 1fr;
gap: 1rem;
/* Las unidades fr tienen en cuenta el espacio automáticamente */
}
Funciones CSS con unidades
clamp() - Valores responsive con restricciones
clamp() es una de las funciones CSS más poderosas para el diseño responsive. Toma tres valores: mínimo, preferido y máximo.
/* Tamaño de fuente responsive que nunca se vuelve demasiado pequeño o grande */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* Mínimo: 1.5rem (24px)
Preferido: 4vw (escala con el viewport)
Máximo: 3rem (48px) */
}
/* Ancho de contenedor responsive */
.container {
width: clamp(320px, 90%, 1200px);
}
/* Espaciado responsive */
section {
padding: clamp(1rem, 5vw, 4rem);
}
min() y max()
/* El ancho es el menor de 90% o 1200px */
.container {
width: min(90%, 1200px);
}
/* Al menos 300px de ancho, pero puede crecer */
.sidebar {
width: max(300px, 25%);
}
/* Combinar para valores responsive complejos */
.card {
width: min(100% - 2rem, 600px);
padding: max(1rem, 2vw);
}
calc() - Aritmética con unidades
calc() te permite mezclar diferentes unidades en cálculos:
.sidebar-layout {
/* Ancho completo menos la barra lateral */
.main-content {
width: calc(100% - 280px);
}
/* Centrado con max-width y márgenes automáticos */
.content {
width: calc(100% - 2 * 1.5rem);
max-width: 800px;
margin: 0 auto;
}
}
/* Tipografía fluida usando calc */
h1 {
/* Tamaño base + factor de escala */
font-size: calc(1.5rem + 1.5vw);
}
/* Espaciado basado en viewport con mínimo */
.hero {
padding-top: calc(2rem + 5vh);
padding-bottom: calc(2rem + 5vh);
}
Recomendaciones prácticas: ¿Qué unidad cuándo?
Tamaños de fuente
/* Tamaño de fuente raíz: usar porcentaje o px */
html {
font-size: 100%; /* Respeta la configuración del navegador del usuario */
}
/* Todos los demás tamaños de fuente: usar rem */
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
small { font-size: 0.875rem; } /* 14px */
/* Tamaños de fuente responsive: usar clamp con rem y vw */
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
}
Espaciado (Padding, Margin, Gap)
/* Usar rem para espaciado consistente */
.card {
padding: 1.5rem;
margin-bottom: 2rem;
}
.grid {
gap: 1.5rem;
}
/* Usar em para espaciado que debe escalar con el tamaño de fuente */
.button {
padding: 0.5em 1em;
}
Anchos de diseño
/* Usar porcentaje, fr o unidades de viewport */
.container {
width: min(90%, 1200px);
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Secciones de ancho completo */
.hero {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
Bordes y sombras
/* Usar px para detalles visuales finos */
.card {
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 0.5rem; /* rem para border-radius también está bien */
}
Media Queries
/* Usar px o em para breakpoints */
@media (min-width: 768px) {
/* Tableta y superior */
}
@media (min-width: 1024px) {
/* Escritorio y superior */
}
/* Los breakpoints en em respetan el zoom del usuario */
@media (min-width: 48em) {
/* 48em = 768px en el tamaño de fuente predeterminado */
}
Tabla completa de recomendaciones
| Caso de uso | Unidad recomendada | Razonamiento |
|---|---|---|
| Tamaños de fuente | rem | Respeta las preferencias del usuario, sin efecto compuesto |
| Tamaños de fuente responsive | clamp(rem, vw, rem) | Escala suavemente con restricciones |
| Espaciado (padding, margin) | rem | Consistente, escala con la fuente raíz |
| Padding de botones | em | Escala con el tamaño de fuente del botón |
| Anchos de contenedor | %, min(), clamp() | Flexible y responsive |
| Columnas de grid | fr | Distribuye el espacio proporcionalmente |
| Longitud de línea | ch | Optimiza la legibilidad |
| Bordes | px | Detalles finos, no deben escalar |
| Sombras | px | Detalles finos, apariencia consistente |
| Secciones de pantalla completa | dvh | Tiene en cuenta la barra de direcciones móvil |
| Breakpoints de media queries | px o em | Puntos de activación consistentes |
| Border-radius | rem o px | Ambos funcionan; rem escala ligeramente |
Accesibilidad y unidades CSS
Elegir las unidades CSS correctas está directamente relacionado con la accesibilidad.
Respetar la configuración de tamaño de fuente del usuario
Los usuarios pueden aumentar el tamaño de fuente predeterminado de su navegador para mejorar la legibilidad. Usar rem para tamaños de fuente y espaciado respeta esta preferencia:
/* Bien: Escala con las preferencias de tamaño de fuente del usuario */
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
.container { padding: 1.5rem; }
/* Mal: Ignora las preferencias del usuario */
body { font-size: 16px; }
h1 { font-size: 40px; }
.container { padding: 24px; }
Soporte de zoom
Los usuarios deben poder hacer zoom al 200% sin desplazamiento horizontal (criterio de éxito WCAG 2.1 1.4.10):
/* Bien: Responsive en cualquier nivel de zoom */
.content {
max-width: min(90%, 65ch);
margin: 0 auto;
padding: 1.5rem;
}
/* Mal: El ancho fijo se rompe con zoom alto */
.content {
width: 960px;
margin: 0 auto;
padding: 24px;
}
Objetivos táctiles
Los elementos interactivos deben tener al menos 44x44 píxeles CSS (WCAG 2.5.5):
.button {
min-height: 2.75rem; /* 44px */
min-width: 2.75rem;
padding: 0.75rem 1.5rem;
}
/* Asegurar espacio adecuado entre objetivos táctiles */
.nav-list li + li {
margin-top: 0.5rem;
}
Errores comunes y cómo evitarlos
Error 1: Usar px para tamaños de fuente
/* Mal: No escala con las preferencias del usuario */
body { font-size: 16px; }
h1 { font-size: 32px; }
/* Bien: Escala con las preferencias del usuario */
body { font-size: 1rem; }
h1 { font-size: 2rem; }
Error 2: Usar vh para diseños móviles de altura completa
/* Mal: Se recorta detrás de la barra de direcciones móvil */
.mobile-layout { height: 100vh; }
/* Bien: Tiene en cuenta la barra de direcciones móvil */
.mobile-layout { height: 100dvh; }
/* El más seguro: Fallback para navegadores más antiguos */
.mobile-layout {
height: 100vh;
height: 100dvh;
}
Error 3: Efecto compuesto de valores em
/* Mal: El tamaño de fuente crece con el anidamiento */
li { font-size: 1.1em; }
/* Bien: Consistente independientemente del anidamiento */
li { font-size: 1.1rem; }
Error 4: Usar vw para tamaños de fuente sin restricciones
/* Mal: Demasiado pequeño en móvil, demasiado grande en escritorio */
h1 { font-size: 5vw; }
/* Bien: Restringido con clamp */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
Error 5: Confusión con padding en porcentaje
/* Sorpresa: El padding vertical está basado en el ANCHO */
.box {
padding-top: 10%; /* 10% del ANCHO del padre, no del alto */
padding-bottom: 10%; /* Lo mismo -- basado en el ANCHO */
}
Unidades CSS en frameworks modernos
Tailwind CSS
Tailwind usa una escala de espaciado basada en rem:
{/* Espaciado Tailwind: 1 unidad = 0,25rem = 4px */}
<div class="p-4 m-6 text-lg">
{/* p-4 = padding: 1rem (16px) */}
{/* m-6 = margin: 1,5rem (24px) */}
{/* text-lg = font-size: 1,125rem (18px) */}
</div>
Módulos CSS / CSS-in-JS
// Styled Components / Emotion
const Card = styled.div`
padding: 1.5rem;
margin-bottom: 2rem;
font-size: 1rem;
border: 1px solid #e0e0e0;
border-radius: 0.5rem;
max-width: min(100%, 600px);
`;
Conclusión
Las unidades CSS son un tema fundamental que afecta todos los aspectos del desarrollo web -- diseño, tipografía, accesibilidad y responsividad. La idea clave es que no hay una única unidad "mejor"; la elección correcta depende del contexto.
Puntos clave:
- Usar
remcomo predeterminado para tamaños de fuente, espaciado y la mayoría de las medidas - Usar
pxpara detalles finos como bordes, sombras y contornos - Usar
frpara diseños Grid para distribuir el espacio proporcionalmente - Usar
dvhen lugar devhpara diseños móviles de altura completa - Usar
chpara longitudes de línea para optimizar la legibilidad - Usar
clamp()para valores responsive con restricciones mínimas y máximas - Usar
emcon moderación para el escalado proporcional de componentes (como el padding de botones) - Siempre pensar en la accesibilidad -- elegir unidades que respeten las preferencias del usuario
Dominar las unidades CSS requiere práctica, pero los principios son claros: preferir unidades relativas sobre absolutas, pensar en cómo tu diseño responderá a diferentes contextos, y siempre considerar la accesibilidad.
Para conversiones rápidas de unidades en tu flujo de trabajo de desarrollo, prueba nuestra herramienta Convertidor de unidades. También puedes usar nuestro Selector de colores para valores de color CSS y nuestras herramientas de desarrollo CSS para otras tareas de desarrollo web.
Recursos relacionados
- Convertidor de unidades -- Convertir entre diferentes unidades
- Selector de colores -- Seleccionar y convertir colores CSS
- Tendencias de desarrollo web 2026 -- CSS moderno y más
- Formateador JSON -- Formatear tokens de diseño y configuraciones CSS
- Probador de regex -- Probar patrones regex relacionados con CSS