margin-top 32px

Hi Gambler0815;
Autoptimize, by itself, has no CSS that it adds to the autoptimized CSS, but simply aggregates all CSS on a site. So however you look at it, the 32px top-margin must be hidden somewhere in the CSS of your site. I’ll be happy to have a look if you can provide me with the URL of your site (here or via futtta-at-gmail-dot-com).

kind regards,
frank

I just had a look at your site without autoptimize (by adding ?ao_noptimize=1) and the CSS is inline, added on line 567 in the case of the homepage;

<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>

This seems to be the CSS of the wp adminbar, cfr. http://davidwalsh.name/remove-wordpress-admin-bar-css.

Now without AO this isn’t visible, as a couple of lines later this is set:

<style> html {   margin-top: 0 !important;} </style>

The problem (and reason why you now do see the top margin when using AO) is that the first block is set for media=screen and the second does not have a media type. As a result, Autoptimize will put the first block in one aggregated file for media=screen and the second block in another aggregated file with media=all. I’m not sure why, but it seems that due to this, the first block takes precedence.

The solution either apply the filter from the article linked above to not show that top-margin or find where the “margin-top:0” is coming from and make sure it is added for media=screen instead.

hope this helps,
frank