Guía práctica de unidades CSS y ejemplos sencillos de cómo utilizarlas en WordPress

En WordPress, donde tu contenido puede verse desde un smartwatch hasta una televisión de 65 pulgadas, dominar las unidades CSS no es un lujo, es una necesidad. Esta guía te va a enseñar cuándo usar cada una para que tu web siempre se vea como debe.

Esta guía está pensada para que puedas probar todo directamente desde el personalizador de WordPress (Apariencia → Personalizar → CSS adicional) y veas los cambios al momento. Porque una cosa es la teoría y otra muy distinta es ver cómo queda en tu web real.

¿Qué son las unidades CSS?

Las unidades CSS son el idioma que usa tu navegador para entender cuánto espacio debe ocupar cada elemento de tu web. Son la diferencia entre una web que se ve perfecta en todos los dispositivos y otra que se rompe en cuanto alguien la abre desde el móvil.

Imagínate que estás construyendo una casa: no puedes decirle al albañil «pon la ventana ahí más o menos», necesitas medidas precisas.

Con CSS pasa igual: cada padding, margin, font-size y width necesita una unidad que le diga al navegador exactamente qué hacer. Para precisión los px, rem para lo escalable, porcentajes para lo flexible, y viewport para lo espectacular.

Las unidades CSS definen medidas en el diseño web: tamaños de fuentes, márgenes, anchos de elementos, etc. Hay distintos tipos de unidades, cada una con un comportamiento diferente. En WordPress, puedes usarlas en temas, plugins, en el editor de bloques (Gutenberg) o incluso en el CSS adicional del personalizador.

Tipos de unidades CSS y sus diferencias

Unidades absolutas

Píxeles (px)

Cuándo usarlos:

• Bordes finos
• Elementos decorativos pequeños
• Cuando necesites precisión milimétrica

Ejemplo práctico para el personalizador:

/* Hacer que los títulos H2 tengan un borde izquierdo de 4px */
.entry-content h2 {
    border-left: 4px solid #e74c3c;
    padding-left: 15px;
}

/* Separador decorativo entre párrafos */
.entry-content p + p::before {
    content: "";
    display: block;
    height: 1px;
    background: #ddd;
    margin: 20px 0;
}

Puntos (pt) y pulgadas (in)

Los puntos vienen del mundo de la impresión. 1 punto = 1/72 de pulgada. Raramente los usarás en web, pero si tu cliente te dice «quiero que sea como en el folleto», ya sabes qué usar.

Ejemplo para impresión:

@media print {
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1 {
        font-size: 18pt;
        margin-bottom: 0.5in;
    }
}

Unidades relativas: adaptabilidad al máximo

Em – Relativo al tamaño de fuente del elemento padre

El em siempre es proporcional al contexto donde está.

Truco rápido: 1em = tamaño de fuente actual del elemento padre.

Ejemplo práctico:

/* Botones que se adaptan al tamaño de texto */
.wp-block-button .wp-block-button__link {
    padding: 0.75em 1.5em;
    font-size: 1em;
    border-radius: 0.25em;
}

/* Espaciado inteligente en listas */
.entry-content ul li {
    margin-bottom: 0.5em; /* Se adapta al tamaño de fuente de la lista */
}

/* Iconos que siempre quedan proporcionales */
.menu-item-has-children > a::after {
    content: "▼";
    font-size: 0.8em; /* Siempre será un 80% del tamaño del texto del menú */
    margin-left: 0.5em;
}

Ex y Ch – Unidades tipográficas precisas

• Ex (altura de la x): Basada en la altura de la letra «x» minúscula de la fuente actual. Perfecta para alineaciones tipográficas precisas.
• Ch (ancho del carácter 0): Basada en el ancho del carácter «0» de la fuente actual. Ideal para elementos que deben tener un ancho específico basado en caracteres.

Ejemplos prácticos:

/* Líneas decorativas que se alinean perfectamente con el texto */
.decorative-line {
    height: 1ex; /* Altura de una x minúscula */
    background: #333;
    margin: 1ex 0;
}

/* Campos de input con ancho basado en caracteres */
.input-codigo-postal {
    width: 5ch; /* Ancho equivalente a 5 caracteres "0" */
    font-family: monospace;
}

.input-telefono {
    width: 12ch; /* Para números de teléfono */
}

/* Espaciado de elementos inline que se alinean con texto */
.inline-icon {
    width: 2ex;
    height: 2ex;
    margin: 0 0.5ch;
    vertical-align: middle;
}

/* Indentación precisa en código o listas */
.code-block {
    text-indent: 4ch; /* Equivale a 4 caracteres de indentación */
    font-family: 'Courier New', monospace;
}

/* Separadores que respetan la tipografía */
.text-separator::after {
    content: " | ";
    margin: 0 1ch;
    color: #ccc;
}

Rem – Relativo al tamaño de fuente raíz

El rem es el em pero más estable. Siempre se refiere al tamaño de fuente del elemento html (la raíz).

Por defecto: 1rem = 16px (en la mayoría de navegadores)

Ejemplo práctico:

/* Espaciado consistente en toda la web */
.entry-content {
margin-bottom: 2rem; /* Siempre 32px */
}

.widget {
padding: 1.5rem; /* Siempre 24px */
margin-bottom: 2rem;
}

/* Tipografía responsive que mantiene las proporciones */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */

/* En pantallas pequeñas, cambias la base y todo se escala */
@media (max-width: 768px) {
html {
font-size: 14px; /* Ahora 1rem = 14px */
}
/* ¡Y todos los rem se escalan automáticamente! */
}

Las unidades de viewport: para controlar la pantalla completa

Viewport Width (vw) y Viewport Height (vh)

Estas unidades son perfectas para crear diseños que se adapten al tamaño de la ventana del navegador.

• 1vw = 1% del ancho de la ventana
• 1vh = 1% de la altura de la ventana

Casos de uso reales:

/* Sección hero que ocupa toda la pantalla */
.hero-banner {
    height: 100vh;
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Títulos que se adaptan al ancho de pantalla */
.hero-title {
    font-size: 8vw; /* Se hará más grande en pantallas anchas */
    max-font-size: 4rem; /* Pero no demasiado grande */
    min-font-size: 2rem; /* Ni demasiado pequeño */
}

/* Barra lateral que nunca se queda sin espacio */
.sidebar {
    width: 25vw;
    min-width: 250px; /* Por si la pantalla es muy pequeña */
}

/* Contenedor que siempre deja márgenes proporcionados */
.container-fluid {
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
}

Viewport Min y Max (vmin, vmax)

• vmin: 1% de la dimensión más pequeña del viewport
• vmax: 1% de la dimensión más grande del viewport

Útiles para elementos que deben mantenerse proporcionales sin importar la orientación del dispositivo.

/* Botón circular que siempre mantiene proporción */
.floating-button {
    width: 15vmin;
    height: 15vmin;
    border-radius: 50%;
    position: fixed;
    bottom: 5vmin;
    right: 5vmin;
}

/* Texto que nunca se sale de pantalla */
.responsive-text {
    font-size: 4vmin;
}

Porcentajes: la unidad social

Los porcentajes son relativos al elemento padre. Son perfectos para diseños fluidos.

Ejemplos prácticos:

/* Diseño clásico a dos columnas */
.main-content {
    width: 70%;
    float: left;
}

.sidebar {
    width: 28%;
    float: right;
    margin-left: 2%;
}

/* Imágenes responsive (un clásico) */
img {
    max-width: 100%;
    height: auto;
}

/* Contenedor centrado con márgenes proporcionados */
.centered-container {
    width: 80%;
    margin: 0 auto;
    max-width: 1200px;
}

/* Barras de progreso dinámicas */
.progress-bar {
    width: 100%;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #4CAF50;
    width: 75%; /* Cambia este valor dinámicamente con JavaScript */
    transition: width 0.3s ease;
}

Unidades modernas: las nuevas incorporaciones

CSS Grid y Flexbox Units (fr, auto, min-content, max-content)

Fraction units (fr) – Solo para CSS Grid.

/* Diseño de 3 columnas donde la del medio se adapta */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
}

/* Diseño responsive automático */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

Calc() – Matemáticas en CSS

La función calc() te permite hacer operaciones matemáticas mezclando diferentes unidades.

/* Contenido que ocupa todo el alto menos el header y footer */
.main-content {
    height: calc(100vh - 120px); /* 120px = altura header + footer */
}

/* Ancho que combina porcentaje y píxeles fijos */
.flexible-width {
    width: calc(100% - 40px); /* Ancho completo menos márgenes */
    margin: 0 20px;
}

/* Espaciado inteligente */
.card {
    width: calc(33.333% - 20px); /* 3 columnas con espacio entre ellas */
    margin-right: 30px;
}

/* Responsive sin media queries */
.responsive-container {
    width: calc(100vw - 2rem);
    max-width: 1200px;
    margin: 0 auto;
}

Trucos específicos para WordPress

Personalizando el editor de bloques

/* Hacer que los bloques de imagen se vean mejor */
.wp-block-image {
margin: 2rem 0;
}

.wp-block-image img {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Mejorar los botones de Gutenberg */
.wp-block-button .wp-block-button__link {
padding: 1em 2em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}

.wp-block-button .wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Ajustes en el menú de navegación

/* Menú responsive que se adapta */
.main-navigation ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.main-navigation li {
flex: 0 0 auto;
}

.main-navigation a {
padding: 0.75rem 1rem;
display: block;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}

/* Desplegable que no se sale de pantalla */
.main-navigation .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
max-width: 90vw; /* No más ancho que la pantalla */
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Pie de página fijo inteligente

/* Pie de página que siempre está al final de la página */
.site {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.site-content {
flex: 1;
}

.site-footer {
margin-top: auto;
padding: 2rem 0;
background: #333;
color: white;
}

Casos prácticos para probar ahora mismo

Prueba estos ejemplos en tu personalizador de WordPress, en la sección de CSS adicional, así podrás ver el potencial al instante…

Espaciado inteligente en entradas

.entry-content > * + * {
margin-top: 1.5rem;
}

.entry-content h2 {
margin-top: 3rem;
margin-bottom: 1rem;
}

.entry-content h3 {
margin-top: 2rem;
margin-bottom: 0.75rem;
}

Botón de «volver arriba» elegante

.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 3rem;
height: 3rem;
background: #333;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(2rem);
transition: all 0.3s ease;
z-index: 1000;
}

.back-to-top.visible {
opacity: 1;
transform: translateY(0);
}

.back-to-top:hover {
background: #555;
transform: translateY(-0.25rem);
}

Tarjetas responsive automáticas

.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding: 2rem;
}

.card {
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

Consejos de rendimiento y mejores prácticas

Evita recálculos innecesarios

/* MAL: Causa recálculos constantes */
.animado {
width: calc(100% - 10px);
transform: translateX(calc(50vw - 50%));
}

/* BIEN: Más eficiente */
.animado {
width: 100%;
margin-left: -10px;
transform: translateX(50%);
margin-left: -50%;
}

Usa las unidades correctas para cada caso

• px: Bordes, decoraciones pequeñas
• em: Espaciado relacionado con texto
• rem: Espaciado general, tipografía
• ex: Líneas decorativas, alineación tipográfica precisa
• ch: Campos de input, anchos basados en caracteres
• %: Anchos de contenedores, layouts fluidos
• vh/vw: Elementos a pantalla completa
• vmin/vmax: Elementos que deben mantener proporción

Combina unidades inteligentemente

/* Responsive sin media queries complejas */
.intelligent-spacing {
padding: clamp(1rem, 4vw, 3rem);
font-size: clamp(1rem, 2.5vw, 2rem);
}

Resumen para tener a mano

Aquí te dejo una tabla y una lista sobre unidades CSS que resumen todo lo visto en esta guía (sin los ejemplos), para que lo tengas siempre a mano.

Tabla resumen de unidades CSS

Lista rápida: ¿cuándo usar cada unidad en WordPress?

• px → Bordes finos, iconos pequeños, sombras, elementos decorativos que necesitan precisión
• em → Padding y margin de botones, espaciado dentro de componentes de texto, elementos que deben escalar con el texto
• rem → Tipografía (tamaños de fuente), espaciado general entre secciones, márgenes de contenedores principales
• ex → Líneas decorativas que se alinean con texto, separadores tipográficos, elementos que deben respetar la altura de la fuente
• ch → Campos de input con longitud específica (códigos postales, teléfonos), anchos basados en número de caracteres
• % → Anchos de columnas e imágenes responsive, diseños fluidos, elementos que deben adaptarse al contenedor padre
• vw/vh → Secciones hero a pantalla completa, overlays, elementos que ocupan toda la ventana del navegador
• vmin/vmax → Botones flotantes, elementos que deben mantener proporción en cualquier orientación
• calc() → Cuando necesites combinar diferentes unidades o hacer cálculos complejos (ancho completo menos header fijo)
• fr → Diseños con CSS Grid donde necesites distribución proporcional flexible

Conclusión … o reflexión

Elegir bien las unidades CSS mejora la accesibilidad, la adaptabilidad y la consistencia visual de tu sitio WordPress. Usa rem para tipografía global, combina % y vw/vh para diseños fluidos, y recurre a px solo cuando necesites precisión absoluta. La clave está en experimentar y ver qué funciona mejor en tu web.

Usa el personalizador de WordPress para probar todo esto en tiempo real, y recuerda: una web que se ve bien en todos los dispositivos no es casualidad, es buena elección de unidades CSS.

Ahora deja de leer y ponte a trastear. Tu web te lo agradecerá (y tus usuarios también).

¿Te ha resultado útil esta guía? Compártela con otros desarrolladores que también estén hartos de usar solo píxeles para todo.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!