Controla el espaciado y la altura del encabezado de tu sitio web para que coincida con tus preferencias de diseño.

El espaciado del encabezado controla el espacio arriba y abajo del contenido de tu encabezado. Ajustarlo cambia cuánto espacio de respiro tienen tus nombres, logo y navegación, ¡afectando la apariencia general de tu sitio!

Espaciado es el espacio entre el contenido de tu encabezado (nombres, logo, menú de navegación) y los bordes del área del encabezado.

Espaciado superior: Espacio arriba del contenido de tu encabezado

Espaciado inferior: Espacio abajo del contenido de tu encabezado

Más espaciado = encabezado más grande y espacioso
Menos espaciado = encabezado compacto y simplificado

Equilibrio visual. Algunos encabezados se sienten apretados, otros demasiado amplios.

Combina con tu estilo. Las bodas elegantes podrían querer más espacio, las casuales menos.

Optimización móvil. Reduce el espaciado en teléfonos para ahorrar espacio de pantalla.

Tamaño del logo. Si tienes un logo, más espaciado le da espacio para respirar.

Preferencia personal. ¡Quizás simplemente te gusta cómo se ve cierta cantidad de espaciado!

¡El espaciado de tu encabezado se actualiza inmediatamente!

El espaciado generalmente se mide en píxeles (px).

Espaciado pequeño: 10-20px (compacto, mínimo)

Espaciado medio: 30-50px (cómodo, estándar)

Espaciado grande: 60-100px (espacioso, lujoso)

Extra grande: 100px+ (dramático, encabezado con presencia)

Generalmente puedes configurar valores diferentes:

Más arriba, menos abajo: Empuja el contenido hacia abajo desde la parte superior

Más abajo, menos arriba: Crea espacio antes de que comience el contenido de la página

Igual: Apariencia centrada y equilibrada

Diferente: Asimétrico, puede crear efectos interesantes

¡Experimenta para ver qué se ve mejor!

Logos grandes: Dales espacio para brillar

Diseños mínimos: El espacio en blanco extra se siente elegante

Vistas de escritorio: Las pantallas más grandes pueden manejar más espaciado

Encabezados pegajosos: Los encabezados que permanecen visibles al desplazarse a menudo necesitan espaciado

Hacer una declaración: Mucho espaciado crea un look audaz y seguro

Dispositivos móviles: Ahorra espacio de pantalla en pantallas pequeñas

Muchos enlaces de navegación: Los encabezados compactos caben más enlaces

Sitios con mucho contenido: Llega a tu contenido más rápido

Temas minimalistas: Algunos temas están diseñados con espaciado mínimo

Encabezados pegajosos: Menos espaciado cuando el encabezado se comprime al desplazar

Después de ajustar:

Algunos sistemas te permiten configurar diferente espaciado para móvil vs. escritorio:

Escritorio: 60px arriba y abajo

Móvil: 20px arriba y abajo

¡Esto te da un encabezado espacioso en computadoras pero ahorra espacio en teléfonos!

Si tienes una imagen de encabezado, el espaciado afecta cuánto espacio hay alrededor:

Más espaciado: La imagen aparece más pequeña con espacio alrededor

Menos espaciado: La imagen es más prominente

¡Encuentra el equilibrio correcto para tu diseño!

Tu menú de navegación es parte del encabezado, así que el espaciado lo afecta también:

Espaciado generoso: El menú tiene mucho espacio, fácil de hacer clic

Espaciado ajustado: El menú se siente compacto, podría ser más difícil de tocar en móvil

¡Considera la usabilidad al ajustar!

Espaciado responsivo: Se ajusta automáticamente según el tamaño de pantalla

Espaciado fijo: Igual en todos los dispositivos

¡Responsivo generalmente es mejor! Verifica si tu tema lo admite.

El espaciado afecta cuán "pesado" se siente tu encabezado:

Más espaciado = más ligero, aireado

Menos espaciado = más denso, compacto

¡Combina con la sensación que quieres que los invitados tengan al visitar tu sitio!

El espaciado trabaja con la alineación para crear la apariencia de tu encabezado:

Contenido centrado + mucho espaciado: Elegante, formal

Contenido alineado a la izquierda + espaciado mínimo: Moderno, limpio

Centrado + espaciado mínimo: Compacto, eficiente

Demasiado: El encabezado ocupa la mitad de la pantalla antes de que los invitados vean contenido

Muy poco: El encabezado se siente apretado y difícil de leer

Desbalanceado: El espaciado superior e inferior son muy diferentes sin razón

No probar en móvil: Se ve genial en escritorio, terrible en teléfonos

La mayoría de los sistemas usan píxeles (px), pero podrías ver:

px (píxeles): Espaciado fijo (más común)

em/rem: Relativo al tamaño del texto

% (porcentaje): Relativo al tamaño del contenedor

¡Los píxeles son los más simples y predecibles!

Espaciado (padding): Espacio dentro del encabezado (alrededor del contenido)

Margen: Espacio fuera del encabezado (entre el encabezado y otros elementos)

Probablemente estés ajustando el espaciado, pero algunos sistemas usan margen. ¡Funcionan de manera similar!

Cada tema tiene espaciado por defecto. Si no estás seguro:

Empieza con el valor por defecto

Ajusta gradualmente (10-20px a la vez)

Compara con el valor por defecto si quieres reiniciar

Si tu encabezado se fija a la parte superior al desplazar:

Espaciado completo cuando está arriba: 60px se siente espacioso

Espaciado reducido al desplazar: 30px lo mantiene compacto

¡Algunos temas automáticamente reducen el espaciado en encabezados pegajosos!

Suficiente espaciado hace los objetivos táctiles más grandes (bueno para tocar en móvil)

Muy poco espaciado hace los botones difíciles de presionar

¡Equilibra la estética con la usabilidad!

¡El espaciado del encabezado es un detalle sutil que marca una gran diferencia en cuán pulido y profesional se siente tu sitio. Vale la pena dedicar unos minutos a ajustarlo!