Tutorial WordPress: Espaciado consistente entre títulos y párrafos con utilidades CSS

Introducción

Este tutorial muestra cómo conseguir un espaciado vertical consistente entre títulos y párrafos en WordPress utilizando utilidades CSS, variables de espaciado y la integración con el editor de bloques (theme.json). El objetivo es establecer una ritmo vertical uniforme que facilite la lectura y que sea fácil de mantener y de personalizar por tema o por usuario.

Principios clave

Escala de espaciado: trabajar con una escala modular (por ejemplo: 4, 8, 16, 24, 32px) permite coherencia.
Variables CSS: usar custom properties facilita cambios globales y compatibilidad con dark mode o ajustes responsivos.
Regla única para el ritmo: preferir una regla que gestione el espaciado entre elementos del contenido (.entry-content gt ) evita tener que anotar márgenes en cada selector de bloque.
Utilidades: añadir clases utilitarias (p. ej. .u-mt-2, .u-mb-1) para excepciones controladas y para facilitar ajustes desde bloques reutilizables.

Enfoques posibles

Regla global de ritmo: establecer un único margen superior entre elementos en el contenedor del contenido. Es la forma más robusta y simple.
Variables de espaciado y utilidades: definir variables (–space-1, –space-2, …) y crear clases utilitarias para casos puntuales.
Integración con theme.json: para temas basados en bloques, declarar la escala en theme.json para que el editor reconozca las opciones y se mantenga coherencia entre editor y frontend.

Ejemplo 1 — Regla global de ritmo (CSS)

Este fragmento aplica un espaciado consistente entre todos los hijos directos del contenedor de contenido. Ajusta la variable –space-base según tu escala.

:root {
  --space-0: 0px
  --space-1: 8px
  --space-2: 16px
  --space-3: 24px
  --space-4: 32px
  --space-5: 48px
  --space-base: var(--space-2) / valor por defecto para el ritmo /
}

/ Contenedor principal de entradas/posts: adapta el selector a tu tema /
.entry-content >     {
  margin-top: var(--space-base)
}

/ Ajustes específicos para títulos si quieres darles más presencia /
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: calc(var(--space-base)  1.5)
  margin-bottom: calc(var(--space-base) / 1.25)
  line-height: 1.25
}

Razonamiento

La regla .entry-content gt añade margen superior solo a elementos que siguen a otro hijo directo, por tanto no afecta al primer elemento y mantiene el flujo sin acumulación de márgenes. Ajustar la variable –space-base modifica el ritmo de toda la zona de contenido de un solo golpe.

Ejemplo 2 — Utilidades CSS de espaciado

Si necesitas variaciones rápidas o permitir ajustes manuales en bloques estáticos, añade utilidades con la misma escala de variables.

/ Utilidades de margen superior y inferior (puedes generar más tamaños) /
.u-mt-0 { margin-top: var(--space-0) !important }
.u-mt-1 { margin-top: var(--space-1) !important }
.u-mt-2 { margin-top: var(--space-2) !important }
.u-mt-3 { margin-top: var(--space-3) !important }
.u-mt-4 { margin-top: var(--space-4) !important }

.u-mb-0 { margin-bottom: var(--space-0) !important }
.u-mb-1 { margin-bottom: var(--space-1) !important }
.u-mb-2 { margin-bottom: var(--space-2) !important }
.u-mb-3 { margin-bottom: var(--space-3) !important }
.u-mb-4 { margin-bottom: var(--space-4) !important }

/ Ejemplo de utilidad compuesta para reducir la sobrescritura del ritmo general en un caso concreto /
.u-reset-spacing { margin: 0 !important padding: 0 !important }

Ejemplo 3 — Integración con theme.json (block themes)

Declarar una escala de espaciado en theme.json hace que el editor de bloques muestre esos valores y que el editor y el frontend compartan la misma escala.

{
  version: 2,
  settings: {
    spacing: {
      units: [px, %, rem],
      customPadding: true,
      customUnits: [],
      spacingScale: {
        0: 0px,
        1: 8px,
        2: 16px,
        3: 24px,
        4: 32px,
        5: 48px
      }
    }
  },
  styles: {
    spacing: {
      blockGap: var(--space-2)
    }
  }
}

Nota: la clave exacta para theme.json puede depender de la versión y del soporte. Asegúrate de consultar la documentación de WordPress para la versión que uses y mapear la escala a variables CSS si quieres usarla en el frontend.

Ejemplo 4 — Registrar variables desde functions.php

Si quieres inyectar las variables de espaciado dinámicamente o sincronizarlas con opciones del tema, añadirlas en una hoja inline desde functions.php es una opción.

Ejemplo 5 — HTML de contenido y cómo responde

Ejemplo de estructura de entrada. Con la regla global de ritmo, no necesitas añadir márgenes manuales entre estos elementos el CSS anterior se encargará.


  Subtítulo principal
  Primer párrafo que introduce el tema. No necesita margen superior.
  Segundo párrafo, seguirá el espaciado definido por .entry-content gt    
  Subsección
  Contenido adicional de la subsección.
  
    Elemento de lista 1
    Elemento de lista 2

Tabla de referencia: escala recomendada

Clave	Variable	Equivalencia (px)	Uso típico
0	–space-0	0px	Reset, elementos compactos
1	–space-1	8px	Espaciado pequeño, texto relacionado
2	–space-2	16px	Ritmo base entre párrafos
3	–space-3	24px	Espaciado entre secciones
4	–space-4	32px	Títulos y separación mayor
5	–space-5	48px	Bloques destacados, márgenes amplios

Buenas prácticas y consideraciones

Usa una sola fuente de verdad para espaciado (variables CSS o theme.json). Evita duplicar la lógica en múltiples archivos.
Prefiere la regla .entry-content gt para mantener el ritmo sin conflictos por la acumulación de márgenes.
Aplica utilidades solo para casos excepcionales (callouts, botones, elementos aislados). No abuses de !important salvo para utilidades que deben sobreescribir reglas previas.
Revisa el comportamiento en dispositivos pequeños ajusta variables en media queries si necesitas un ritmo más compacto en móviles.
Si tu tema soporta editor de bloques, sincroniza theme.json con tus variables para que el editor refleje exactamente el resultado del frontend.

Media query ejemplo (opcional)

@media (max-width: 768px) {
  :root {
    --space-base: var(--space-1) / reducir ritmo en pantallas pequeñas /
  }
}

Checklist antes de desplegar

Has definido una escala de espaciado clara y documentada.
La regla global para el ritmo está aplicada al contenedor correcto (.entry-content o .post-content según tema).
Las utilidades no entran en conflicto con reglas específicas de bloques.
El editor de bloques (si procede) muestra opciones coherentes mediante theme.json.
Se ha probado en varios tamaños de pantalla y en los navegadores objetivo.

Conclusión

Un espaciado vertical consistente mejora la legibilidad y la percepción visual del contenido. Implementando una escala de espaciado con variables CSS, una regla global para el ritmo y utilidades para casos puntuales, obtendrás un sistema flexible, mantenible y fácil de adaptar desde el editor de bloques o mediante ajustes en el tema.

SushiHost