0

I have a html file that have unwanted 8px top margin:

enter image description here

When I inspect it, it shows something like this:

enter image description here

What on which source code is "user agent stylesheet"?

EDIT

My bad, I make a mistake when find and replacing <%# into <!-- and %> into -->, my bootstrap.css was commented out.

<script src="/js/jquery.min.js"></script> <!-- http://api.jquery.com/ ?>

<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap.min.js"></script> <!-- http://getbootstrap.com/getting-started/ -->
Kokizzu
  • 24,974
  • 37
  • 137
  • 233

7 Answers7

2

By default the body element has an 8px margin.

You can reset that by adding some CSS:

body { margin: 0; padding:0 /* for opera */ }

Here is a chart from the spec showing the default rules applied to elements

(notice the rule: body { margin: 8px } )

Danield
  • 121,619
  • 37
  • 226
  • 255
  • 1
    Note that some browsers (e.g. Opera) uses padding on the body instead of margin. – Guffa Nov 17 '14 at 10:05
  • @Guffa - Are you referring to the pre-blink version of opera or the current version as well? – Danield Nov 17 '14 at 10:09
  • I haven't tested the latest versions, but I can't find any reference to that the defaults have changed. Either way, the Blink engine is so recent that it's still not safe to only override the margin. – Guffa Nov 17 '14 at 10:13
  • @Guffa - thanks I updated the post to include padding – Danield Nov 17 '14 at 10:16
2

Every browser has its default margin, padding, etc. values. If you want to avoid this, you should reset it. Helpers like bootstrap have rules that reset this.

Tomas Smagurauskas
  • 656
  • 5
  • 16
2

As it is answered here, your user agent stylesheet is your browser. Usually, every browser has some stylesheet enabled by default, and you can use reset stylesheet (Meyer Reset CSS for example) to resolve the problem.

Community
  • 1
  • 1
Nomce
  • 738
  • 1
  • 6
  • 18
1

The user agent stylesheet is set by the browser as default. You can override this default user agent styles by resetting. In your case you can specify in your own stylesheet.

body {
   margin:0;
}

For an example of a global user agent stylesheet reset click here

Jeroen W
  • 832
  • 6
  • 9
1

The user agent stylesheet are native styles determined by the browser itself.

To get rid of it, you need to do one of the following:

tomekwi
  • 2,048
  • 2
  • 21
  • 27
1

The user agent stylesheet is the default styles in the browser. All browsers have either a default margin or padding on the body element. You should specify both if you want to override them:

body { margin: 0; padding: 0; }
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
1

Those style is from user agent stylesheet. It might be different for different browsers. You can override the style by adding custom style for the body element

body {
    margin: 0px;
}
N K
  • 3,217
  • 5
  • 23
  • 38