Unidades relativas: em y rem
Dimensione los elementos en relación con el tamaño de fuente del elemento principal o de la raíz mediante unidades em y rem.
Unidades relativas: em y rem es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué son las unidades relativas?
Las unidades relativas se escalan según otra medida, normalmente el tamaño de fuente de un elemento o del elemento raíz. Permiten crear diseños escalables y adaptables que respetan la configuración del usuario.
em — Relativa al tamaño de fuente del padre
em es relativa al tamaño de fuente del elemento actual (para la propia propiedad font-size) o al elemento padre (para las demás propiedades). Esto puede provocar una acumulación de escalas.
<div class="parent">
Parent (20px)
<div class="child">
Child (1.5em = 30px)
<div class="grandchild">Grandchild (1.5em = 45px!)</div>
</div>
</div>
em para el espaciado
Cuando em se utiliza para padding, margin o border-radius, es relativa al tamaño de fuente del propio elemento. Esto permite crear componentes que se escalan proporcionalmente.
<button class="button">Padded Button</button>
rem — Relativa al tamaño de fuente raíz
rem (em raíz) es relativa al tamaño de fuente del elemento raíz (html). Nunca se acumula y su comportamiento es predecible en toda la página.
<h1>Heading (2.5rem = 40px)</h1>
<p>Paragraph text (1rem = 16px)</p>
<small>Small print (0.75rem = 12px)</small>
rem y la accesibilidad del usuario
Si el usuario aumenta el tamaño de fuente base del navegador (por ejemplo, de 16px a 20px para facilitar la lectura), las unidades rem se escalan en consecuencia. Las unidades px fijas no lo hacen. Por eso se recomienda encarecidamente utilizar rem para la tipografía.
font-size de html en porcentajes
Establezca el tamaño de fuente raíz como un porcentaje para respetar la configuración del navegador del usuario:
<p>Root font-size respects the browser/user default (100%).</p>
Cómo elegir entre em y rem
Guía práctica:
- Utilice
rempara los tamaños de fuente, los valores de espaciado y las medidas de diseño - Utilice
empara el espaciado interno de componentes que deba escalarse con el tamaño de fuente del componente (por ejemplo, el padding de un botón)
em en media queries
Las media queries especificadas en em responden a los cambios en el tamaño de fuente del navegador. Un punto de ruptura de 48em = 768px con la configuración predeterminada, pero se adapta si el usuario ha cambiado el tamaño de fuente base.
<div class="layout">
<div>Column A</div>
<div>Column B</div>
</div>
Cálculo de em
La fórmula es: desired px / parent px = em value. Si el elemento padre tiene 16px y desea un texto de 24px: 24/16 = 1.5em.
<h2>Heading (24px via 1.5rem)</h2>
<p>Paragraph (18px via 1.125rem)</p>
Problema de acumulación de em
Anidar elementos con tamaños en em hace que el tamaño de fuente se acumule de forma multiplicativa. Por eso se prefiere rem para el tamaño de fuente: siempre hace referencia al elemento raíz y evita la acumulación.
ch — Ancho de carácter
La unidad ch equivale al ancho del carácter «0» en la fuente actual. Es útil para limitar los contenedores de texto a longitudes de línea legibles:
<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>
Comprobación rápida
Un botón tiene font-size: 1.25rem y padding: 0.5em. Si el tamaño de fuente raíz es de 16px, ¿cuál es el padding en píxeles?
Resumen
em se escala con respecto al tamaño de fuente del elemento actual (o del padre para la propia propiedad font-size), por lo que puede acumularse. rem siempre se escala con respecto al elemento raíz y nunca se acumula. Utilice rem para la tipografía y el espaciado global; utilice em para el espaciado interno proporcional de los componentes.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Unidades relativas: em y rem» es gratis?
Sí — el texto completo de «Unidades relativas: em y rem» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Unidades relativas: em y rem»?
Dimensione los elementos en relación con el tamaño de fuente del elemento principal o de la raíz mediante unidades em y rem. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Unidades relativas: em y rem»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Unidades absolutas: px, pt y cm
- Unidades relativas: em y rem
- Unidades de la ventana gráfica: vw, vh y dvh
- Funciones Min, Max y Clamp