CSS - Initial HTML Margin Issue On WordPress Site

admin管理员组

文章数量:1430020

This is a WordPress site and I'm using bootstrap.

Site is /

Basically I'm just trying to get rid of the initial top margin. So instead of this:

It should look like this:

I've tried adding styles to the html element in my stylesheet, but nothing has worked. I.e.

html {
    margin-top: 0px!important;
}

So then I'm wondering if the issue is WordPress related?

There is not any top margin when I place relevant code in a Codepen.

Any ideas?

This is a WordPress site and I'm using bootstrap.

Site is https://doodle.gatewaywebdesign/

Basically I'm just trying to get rid of the initial top margin. So instead of this:

It should look like this:

I've tried adding styles to the html element in my stylesheet, but nothing has worked. I.e.

html {
    margin-top: 0px!important;
}

So then I'm wondering if the issue is WordPress related?

There is not any top margin when I place relevant code in a Codepen.

Any ideas?

• css
• html
• twitter-bootstrap

Share Improve this question asked May 3, 2019 at 0:42 HappyHands31HappyHands31 1351010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

That looks like the margin added by the WP admin bar when you are logged into the site. WP adds an inline style tag which sets the margin on the html element with an !important flag. Since it typically comes after any of your own styles it overrides them even if you also use !important. Since it only displays when you are logged in it shouldn't matter much, but if you really want to remove the admin bar you can change that in the settings Users->Your Profile then uncheck "Show Toolbar when viewing site". Or add the following to your functions file.

add_filter(‘show_admin_bar’, ‘__return_false’);

Your best bet is to use the Inspector tool in your browser (F12, usually). Position the cursor at the top of the page, right-click, Inspect Element. Then click on the code lines until you find the right spot for that CSS element.

Then over on the right side, find the CSS element for margin or padding, and figure out the CSS class that affects that area. Use that class name to add to the theme's Additional CSS (in Theme, Customize) to add the CSS for top margin.

If you have never used the Inspector before, there are many googles (or bings or ducks) that will show you videos. The Inspector is a great way to find the proper CSS class to modify.

(And CSS questions aren't really part of what happens around here.....)

本文标签： CSSInitial HTML Margin Issue On WordPress Site