✅¿Cuál es la Diferencia entre %, em, rem y otras unidades CSS?

Cuando trabajas con CSS en WordPress (o cualquier otra web), te encuentras con muchas unidades de medida: %, em, rem, vw, vh, ch, px…
Y si no tienes clara la diferencia, es fácil caer en errores de diseño, especialmente en responsive.

En este artículo te explico qué significa cada unidad, cuándo usarla y cómo se comporta dentro de un tema o builder de WordPress, todo con ejemplos fáciles de entender.

Unidades relativas vs. absolutas

Primero, hay que distinguir entre dos tipos de unidades:

• Absolutas: no cambian según el contexto (por ejemplo, px o cm).
• Relativas: se adaptan al entorno (por ejemplo, %, em, rem, vw, etc.)

Para diseño moderno y responsive, las unidades relativas son más recomendables.

% — Porcentaje

Se usa para definir medidas en relación al elemento padre.

Ejemplo:

.contenedor {
  width: 100%;
}

Aquí el .contenedor ocupará el 100% del ancho de su contenedor padre.

• Muy útil para diseños fluidos.
• Se usa mucho en width, height, padding, margin.

Ojo: si el padre no tiene altura definida, usar % en height puede no funcionar como esperas.

em — Relativo al tamaño de fuente del elemento actual

Se usa mucho para:

• font-size
• padding, margin
• line-height, box-shadow, etc.

Ejemplo:

.card {
  font-size: 16px;
  padding: 2em;
}

Aquí 2em son 2 × 16px = 32px.

Si dentro de .card hay un elemento con font-size: 20px, entonces 1em dentro de ese subelemento será 20px.

Ventaja: escala automáticamente si cambias el tamaño de fuente.

Riesgo: si anidas varios elementos con em, los tamaños se van acumulando y puede descontrolarse.

rem — Relativo al tamaño de fuente del elemento raíz (html)

Esto es como em, pero en lugar de depender del padre inmediato, siempre se basa en el html.

Ejemplo:

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* siempre será 32px */
}

• Mucho más predecible que em.
• Ideal para font-size, spacing, layout modular.

vw y vh — Viewport Width y Height

• 1vw = 1% del ancho del navegador.
• 1vh = 1% de la altura del navegador.

Ejemplo:

.hero {
  height: 100vh;
}

Hace que .hero ocupe toda la altura de la ventana, muy útil para cabeceras fullscreen.

ch — Ancho del carácter «0»

• Ideal para controlar longitud de líneas de texto.
• 1ch = ancho del dígito “0” de la fuente usada.

Ejemplo:

p {
  max-width: 60ch;
}

Esto limita la línea a unos 60 caracteres, que es la longitud ideal para lectura.

px — Píxeles

Una unidad absoluta que no depende del contexto. Muy común, pero no es flexible ni ideal para diseño adaptativo.

¿Cuándo usar cada una?

¿Y en WordPress?

• Cuando personalizas bloques en Gutenberg, rem y % son los más seguros.
• En builders como Elementor o Bricks, puedes usar em para paddings y rem para tipografía.
• En temas como Blocksy, puedes establecer la fuente base en rem, lo que te permite escalar todo el diseño fácilmente.

Conclusión

No hay una unidad “mejor que todas”. Cada una tiene su utilidad dependiendo del caso.

Pero si quieres un diseño limpio, escalable y adaptado a móviles, mi recomendación sería:

• rem para tipografía y tamaños principales.
• % para anchos y alturas fluidas.
• em solo en casos puntuales (espaciado dentro de componentes).
• ch para controlar la legibilidad de textos largos.
• px para detalles visuales, bordes y sombras.