The fact that
<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>
is added for Admin bar by wp-core at the top of the site.
The trick below will remove those CSS out from yout HTML output Just add this code to your functions.php
add_action('get_header', 'my_filter_head');
function my_filter_head() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
UPDATE
Answering question-starter request.
1) Admin Bar is showing by default if you're logged in. It wrapper has id="wpadminbar" in your HTML responce.
It also enqueue /wp-includes/js/admin-bar.min.js script and add "Support Script" at the bottom of page.
2) Admin Bar can be disabled when you're viewing site for specified users at Users -> User_Record -> "Show Toolbar when viewing site" checkbox.
Additionally it can be disabled in your functions.php (using show_admin_bar filter as described here How do I remove the admin bar (styling) from frontend only?How do I remove the admin bar (styling) from frontend only?)
3) In WP source code _admin_bar_bump_cb() looks like this. It can be found at wp-includes/admin-bar.php
function _admin_bar_bump_cb() { ?>
<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>
<?php
}
This function is used to be added as action to wp_head inside wp-includes/class-wp-admin-bar.php in this way:
if ( empty($header_callback) )
$header_callback = '_admin_bar_bump_cb';
add_action('wp_head', $header_callback);
By removing _admin_bar_bump_cb from action queue you cancel those styles printing
