¿Por qué wp_head() crea un margen superior en el encabezado de mi tema?

Difícil de asegurar sin verlo, pero una suposición fundamentada:

Lo más probable es que sea el CSS de la barra de administración, que solo aparece cuando estás conectado. El <?php wp_head() ?> incluirá el CSS para ella, y <?php wp_footer(); ?> incluye el HTML para la barra de administración.

Si miras, en realidad debería ser un margin-top agregado a la etiqueta html.

Si intentas ocultar la Barra de Administración enganchándote al filtro show_admin_bar, pero haces esto demasiado tarde (por ejemplo, init con la prioridad por defecto es demasiado tarde), obtendrás un margen superior adicional de 28px pero sin la barra de administración visible.

El bloque de estilo del margen es generado por la función _admin_bar_bump_cb que se ejecuta en la acción wp_head. Puedes eliminar esta acción llamando:

remove_action('wp_head', '_admin_bar_bump_cb');

Yo lo coloqué en mi función de enqueue scripts y eliminó exitosamente el margen superior generado, pero estoy seguro de que podrías colocarlo en cualquier parte del functions.php y funcionaría correctamente.

De esta manera no necesitas un override tonto en tu CSS =)

También me encontré con el mismo problema y lo resolví agregando esto:

html{ margin-top:0px !important;}

Colócalo en la parte superior del archivo CSS de tu tema.

Esto también me ha pasado, este espacio es para la barra de administración en la parte superior de tu tema que se muestra a un usuario conectado.

Si has iniciado sesión en el panel de WordPress en el mismo navegador donde estás usando el tema personalizado, entonces ahí está el problema.

Simplemente cierra sesión de la cuenta de administrador de WordPress y vuelve a abrir tu tema personalizado.

Agregar "margin-top: 0px !important" al inicio de tu archivo CSS en realidad funcionará, pero SOLO si reorganizas la información del encabezado para llamar al archivo CSS DESPUÉS de que se ejecute wp_head.

El atributo CSS más bajo siempre será el que se aplique, el 100% del tiempo.

Deberías ver qué clase está añadiendo el margen con Firebug o una herramienta similar.

Prueba esto,

html { margin-top:0px; padding-top:0px; }