Remove Padding / Margin from WordPress Admin Bar

While it’s completely possible to remove the Admin Bar from the front end of your WordPress site altogether, I recently came across a situation where I needed the admin bar to exist on the front end, but I was changing it’s placement.

Doing this by simply creating some CSS to move the Admin Bar isn’t enough though, you’ll still be left with a margin at the top of the page, which seems like it’s padding on the <body> element, but is actually a margin on the <html> element.

If you want to remove this, this is the CSS you’ll need:

html[lang="en-us"] {margin-top:0 !important;}

We need to use the !important call as WordPress injects that as part of its own CSS, and we use the property selector to even further override what WP outputs.

Up Next: Allow Users to Dismiss Messages with jQuery and Cookies