I am creating a custom theme, and elements behave as they should but when I place the <?php wp_head() ?> tag I get a top margin, at the top of my theme header.

When I remove the <?php wp_head(); ?> the margin goes away. I have been at this for a while any help would be great.

I am creating a custom theme, and elements behave as they should but when I place the <?php wp_head() ?> tag I get a top margin, at the top of my theme header.

When I remove the <?php wp_head(); ?> the margin goes away. I have been at this for a while any help would be great.

• theme-development
• wp-head

• 1 something that hooks into wp_head is outputting space before any html is output? – Milo Commented May 19, 2011 at 4:15

8 Answers 8

Hard to saw without looking at it, but an educated guess:

More than likely it is the CSS for the admin bar, which only appears when you are logged in. the <?php wp_head() ?> will include the css for it, and <?php wp_footer(); ?> includes the html for the admin bar.

If you look, it should actually be a margin-top added to the html tag.

If you try to hide the Admin Bar by hooking into the show_admin_bar filter, but do this too late (init with the default priority is too late for example), you will get an extra 28px top margin but no admin bar there.

The margin style block is output by the _admin_bar_bump_cb function which runs on the wp_head action. You can remove the action by calling:

remove_action('wp_head', '_admin_bar_bump_cb');

I placed it in my enqueue scripts function hook and it successfully removed the top margin output, but I'm sure you could place it anywhere in the functions.php and have it work correctly.

That way you don't need a silly override in your css =)

This happened with me as well, this space is for the admin bar at the top of your theme which gets displayed to a logged in user.

If you have logged in to your WordPress dashboard in the same browser in which you're using the custom theme, then there is the problem.

Simply log out from the WordPress admin account and open your custom theme again.

I also encountered the same problem and I solved it by adding this:

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

Put at the top of your theme's CSS file.

adding "margin-top: 0px !important" to the top of your CSS file actually will work, but ONLY if you re-arrange your header information to call the css file AFTER wp_head gets called.

the lowest CSS attribute will get applied, 100% of the time.

You should see what class is adding the margin with firebug or a similar tool.

Try this,

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