How Wide Is the Default '≪Body≫' Margin

How wide is the default `body` margin?

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.

If you want to change it, you can just do this:

body {
margin: 0px;
padding: 0px;
...
}

But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.

Why is there a default margin on the body element?

Languages are originally built to work independently. So that you could technically use that particular language for what is intended for only. In the case of HTML, it is only supposed to allow you to display something on a browser. CSS on the other hand (and as you surely know), is intended to create all the beautification process. So, with that in mind, Anyone should be able to write an HTML document without any CSS at all and browsers should display it in the most legible form. Now, for this to happen as consistent as possible, browsers have something called "sane defaults". These defaults cover the margin and padding on the body, some fonts, the most legible font size, etc. And they leave it up to you to overwrite as needed with CSS.

Without the margin and padding on the body, everything would be completely flushed to the browser window. That is not the best practice if you were reading a document.

EDIT

The links below show Firefox and Webkit CSS defaults. This will help you troubleshoot those defaults that you have no idea where they came from or why they exist.

Webkit

Firefox

HTML not 100% left

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

You need to give margin:0 to body like this

body,html {  margin: 0;  padding:0;}
<body>  <div id="box"></div></body><style>  #box {    width: 200px;    height: 200px;    margin-left: 0px;    background-color: black;  }</style>

HTML still has gaps in container despite 0 margin/padding

Your wrapped entire element would be body? Then you have apply padding and margin 0 to it. You can write in your Style:

body {
margin: 0;
padding: 0;
}

That will be remove this space.

default body margin, I didn't set, but it does have default value 8px, how can get this value?

You can have a look at the following link :

http://javascript.info/tutorial/styles-and-classes-getcomputedstyle

Check body margin value ( http://jsfiddle.net/eMnBL/6/ ) :

var computedStyle = window.getComputedStyle ? getComputedStyle(document.body, null) : document.body.currentStyle;

alert(computedStyle['marginTop']);

How do I remove the top margin in a web page?

I had similar problem, got this resolved by the following CSS:

body {    
margin: 0 !important;
padding: 0 !important;
}

How to align a div to the middle (horizontally/width) of the page

<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>

CSS Margin: 0 is not setting to 0

Try...

body {
margin: 0;
padding: 0;
}

jsFiddle.

Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer's Reset Reloaded.



Related Topics



Leave a reply



Submit