Mysterious fields on a web page

Question

I am developing a Wordpress theme and notice that the entire fragment of the page is slightly shifted. I used the inspector in Chrome to find the problem, and 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 will return to the top. But here is the strange thing. I tried deleting the whole stylesheet to see if there was a problem in css, but the problem still exists. So, I think Chrome should add these lines, but why? It works great in IE and Edge.

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

CSS (pretty dirty but working): https://codeshare.io/sr0sg

Answer 1

Try adding this to your functions.php file:

add_filter('show_admin_bar', '__return_false');

The CSS you specified above is added by WP to make room for the WordPress admin dashboard. You can also hide the admin panel by choosing Users> Profile> Show Toolbar When Editing A Site in the admin area.