Mysterious margins on webpage

Question

I am developing a Wordpress theme and noticed that the whole body of the page is pushed down a bit. I used the inspector in Chrome to find the problem and I found the following styles:

<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>

If I delete this in the inspector the body of the page snaps back to the top. But here is the weird thing. I tried deleting my whole stylesheet to see if the problem was in the css, but the problem is still there. So my guess id that Chrome must be adding these lines, but why? It works fine in IE and Edge.

Edit: I tried clearing css cache in Crome, but no difference.. Edit: I tried adding css reset to the stylesheet but still no difference...

CSS (quite messy, but work in progress): https://codeshare.io/sr0sg

Answer 1

Try adding this to your functions.php file:

add_filter('show_admin_bar', '__return_false');

The CSS you have highligted above is added by WP to make space for the WordPress admin bar. You can also hide the admin bar by going to Users > Your profile > "Show tool bar when editing site" in the admin area.

Answer 2

This question is a little bit old, but the suggested solution is too much drastic. I suggest to maintain the admin bar and just remove the weird CSS.

This can be accomplished with this snippet:

add_action('get_header', 'remove_admin_bar_weird_css');
function remove_admin_bar_weird_css() {
    remove_action('wp_head', '_admin_bar_bump_cb');
}