Introducción

En muchos temas para WordPress los encabezados H1–H6 presentan márgenes inconsistentes: algunos temas aplican márgenes grandes, otros quitan márgenes en ciertos contextos, y los maquetadores visuales (Elementor, WPBakery, Gutenberg) añaden sus propias reglas. Esto provoca páginas con espacio irregular entre títulos y párrafos, saltos visuales o acumulación de espacio. Este tutorial ofrece un método sistemático para diagnosticar, normalizar y mantener un espaciado consistente y accesible en todo el sitio.

Conceptos clave que debes entender primero

• Colapso de márgenes: los márgenes verticales de elementos adyacentes pueden colapsar, haciendo que el espacio no sea la suma de ambos márgenes sino el mayor de los dos.
• Especificidad: las reglas del tema (por ejemplo, .entry-content h2) suelen tener más peso que reglas globales. Usa selectores con cuidado y preferiblemente custom properties y selectores no específicos cuando sea posible.
• Contexto del bloque: los constructores o bloques de Gutenberg envuelven contenido con contenedores que imponen padding/margin, por lo que a veces el problema no es el Hx sino su contenedor.
• Responsive: el espaciado ideal cambia entre móvil y escritorio usa unidades fluidas o media queries.

Diagnóstico paso a paso

1. Abre la página con problemas y selecciona el inspector del navegador (F12).
2. Selecciona un encabezado que se vea raro y observa las reglas aplicadas y su especificidad.
3. Comprueba el computed para margin-top y margin-bottom, y revisa si el contenedor tiene padding o si hay márgenes colapsados.
4. Repite en distintos tipos de páginas (entrada, página estática, archivo, página con constructor) porque cada contexto puede tener reglas distintas.
5. Identifica selectores dominantes: por ejemplo .entry-content h1, .wp-block-heading h2, .elementor-widget-heading h3, etc.

Estrategia general para normalizar el espaciado

1. Crear una base uniforme: resetear márgenes de H1–H6 a valores predecibles.
2. Usar variables CSS (custom properties) para poder ajustar el espaciado desde un solo sitio.
3. Tratar casos especiales con selectores contextuales (contenedores de entradas, bloques, maquetadores).
4. Corregir colapsos con técnicas no intrusivas: por ejemplo, evitar que el primer hijo de un contenedor tenga margin-top inesperado.
5. Asegurar comportamiento responsive usando clamp() o media queries.

Ejemplo: Reset y base con variables CSS

Coloca este CSS en tu hoja de estilos principal (o en un archivo de CSS que cargues como override). Utiliza custom properties para facilitar ajustes posteriores.

:root{
  --heading-gap-vertical: 1.25rem    / espacio base entre heading y siguiente elemento /
  --heading-gap-top: 0              / margen superior por defecto (ajustable) /
  --heading-line-height: 1.2
}

/ Reset suave para todos los headings usando :where para baja especificidad /
:where(h1,h2,h3,h4,h5,h6){
  margin-top: var(--heading-gap-top)
  margin-bottom: var(--heading-gap-vertical)
  line-height: var(--heading-line-height)
  font-weight: 600
}

/ Opcional: márgenes específicos por nivel /
h1{ margin-bottom: 1.5rem font-size: clamp(1.5rem, 2.4vw, 2.25rem) }
h2{ margin-bottom: 1.25rem font-size: clamp(1.25rem, 2vw, 1.75rem) }
h3{ margin-bottom: 1rem font-size: clamp(1.125rem, 1.6vw, 1.25rem) }

Evitar el colapso con reglas de contenedor

Si los títulos al principio de un contenedor empujan el margen hacia arriba, aplica una regla que gestione el primer y último hijo del contenedor de contenido. Ejemplo típico en un tema: .entry-content.

/ Evita que el primer elemento dentro de entry-content genere margen superior inesperado /
.entry-content > :first-child{
  margin-top: 0
}

/ Evita margen inferior innecesario en el último hijo /
.entry-content > :last-child{
  margin-bottom: 0
}

/ Alternativa moderna: hacer al contenedor un nuevo contexto de formato para evitar colapsos /
.entry-content{
  display: flow-root / o overflow: auto o padding: 0.01px 0 /
}

Contextos especiales: Gutenberg y maquetadores

Gutenberg y otros constructores suelen aplicar clases y márgenes a los bloques. Normalizar requiere dirigirse a esos selectores sin romper sus funcionalidades.

/ Bloque de encabezado de Gutenberg /
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3{
  margin-top: var(--heading-gap-top)
  margin-bottom: var(--heading-gap-vertical)
}

/ Elementor /
.elementor-widget-heading h1,
.elementor-widget-heading h2{
  margin-top: 0
  margin-bottom: 1rem
}

Espaciado fluido y responsive

Usa clamp() para obtener márgenes que escalen entre móvil y escritorio sin media queries explícitas. Esto ayuda a que el espaciado se sienta natural en todas las pantallas.

/ Espaciado vertical fluido: mínimo 0.6rem, ideal 1.2vw, máximo 2rem /
:root{
  --heading-gap-vertical: clamp(0.6rem, 1.2vw, 2rem)
}

Casos complejos: anular reglas del tema sin !important

Si una regla del tema tiene mayor especificidad, en lugar de usar !important preferible incrementar la especificidad de forma controlada o cargar una hoja con mayor prioridad (enqueue al final). Ejemplos seguros:

/ Más específico que h2 pero aún mantenible /
.entry-content h2{
  margin-bottom: 1.25rem
}

/ Selector contextual para no romper widgets del footer /
.main-content .entry-content h2{
  margin-bottom: 1.25rem
}

Modificar el editor (estilos dentro del editor GUTENBERG)

Para que lo que ves en el editor se parezca a lo publicado, añade estilos al editor. En functions.php registra y encola un archivo editor-style.

/ functions.php: registrar estilos para el editor de bloques /
function mi_tema_editor_styles() {
  add_theme_support( editor-styles )
  add_editor_style( css/editor-style.css ) // Crea este archivo con tus reglas para h1-h6
}
add_action( after_setup_theme, mi_tema_editor_styles )

Debug avanzado y comprobaciones

• Verifica en varias plantillas (single.php, page.php, archive.php) porque cada plantilla puede tener wrappers distintos.
• Prueba con y sin plugins de caché y minificación ya que pueden combinar CSS y ocultar cambios.
• Utiliza herramientas como Responsive Design Mode del navegador para revisar cambios en distintas resoluciones.
• Usa extensiones que muestran box model y márgenes (p. ej. regla en DevTools > Computed > Box Model).

Buenas prácticas y accesibilidad

• Mantén la semántica correcta: no uses tamaños de heading solo para estilo respeta H1–H6 por jerarquía.
• Evita reducir demasiado el espacio en móvil que pueda dificultar la lectura o el foco visual.
• Comprueba el contraste y el tamaño de fuente junto con el espaciado. Un heading con poco espacio y gran tamaño puede dominar demasiado la página.
• Documenta tus variables CSS para que futuros cambios sean rápidos y coherentes.

Ejemplo práctico completo

Un archivo CSS de override que puedes cargar al final para asegurarte de que aplica en la mayoría de temas:

:root{
  --heading-gap-top: 0
  --heading-gap-vertical: clamp(0.6rem, 1.2vw, 1.75rem)
  --heading-line-height: 1.2
}

/ Base global ligera /
:where(h1,h2,h3,h4,h5,h6){
  margin-top: var(--heading-gap-top)
  margin-bottom: var(--heading-gap-vertical)
  line-height: var(--heading-line-height)
}

/ Correcciones por contexto /
.entry-content > :first-child{ margin-top: 0 }
.entry-content > :last-child{ margin-bottom: 0 }
.entry-content{ display: flow-root }

/ Ajuste para bloques y constructores comunes /
.wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3{ margin-bottom: var(--heading-gap-vertical) }
.elementor-widget-heading h1, .elementor-widget-heading h2{ margin-bottom: 1rem }

/ Headers por nivel /
h1{ margin-bottom: clamp(1rem, 2.4vw, 2.25rem) }
h2{ margin-bottom: clamp(0.9rem, 2vw, 1.5rem) }
h3{ margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem) }

/ Ajustes finales si alguna regla del tema es demasiado agresiva:
   incrementa la especificidad sin usar !important /
.main-content .entry-content h1{ margin-bottom: 2rem }

Checklist rápida antes de publicar

1. Ver en páginas de ejemplo (entrada, página, archivo, home, plantilla con constructor).
2. Probar en móvil y escritorio ajustar clamp() o media queries si hace falta.
3. Asegurar que el editor refleja estilos (add_editor_style).
4. Revisar warnings de accesibilidad: tamaños y espaciado adecuados para lectura.
5. Documentar cambios y guardar override CSS en un lugar mantenible (child theme o plugin de snippets).

Conclusión

Normalizar el espaciado de H1–H6 en temas con márgenes inconsistentes requiere diagnóstico, una regla base reutilizable y ajustes contextuales. Usar variables CSS, reglas para contenedores (para evitar colapsos) y selectores contextuales para bloques y constructores cubrirá la mayoría de los casos sin recurrir a !important. Mantener el editor alineado con el frontend y probar en múltiples plantillas y tamaños de pantalla garantiza resultados estables y accesibles.