Why Is There a Default Margin on The <Body> Element

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

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 am I getting default margin even though i haven't set any?

* {  margin: 0;  padding: 0;}.mainBackground {  background-color: #ece8e8;  width: 100%;  padding: 100px 0;  text-align: center;}

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><div class="mainBackground">    hello</div></body></html>

Is the default margin for body tag deprecated in html5

Browsers have supported topmargin, leftmargin, etc as attributes you could add to the <body> start tag to control margins.

These have never been part of any HTML specification. (If they had been, then they would have been deprecated in HTML 4). They are non-standard extensions to HTML introduced by browsers during the late '90s.

HTML 5 marks then as non-conforming features (which is not the same as deprecated, but the document you found conflates the two states).

The default stylesheet that browsers apply to HTML documents includes a margin for the body element. This is not deprecated (or mandated by any specification).

Removing body margin in CSS

I would say that using:

* {
  margin: 0;
  padding: 0;
}

is a bad way of solving this.

The reason for the h1 margin popping out of the parent is that the parent does not have a padding.

If you add a padding to the parent element of the h1, the margin will be inside the parent.

Resetting all paddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.

Margin at top of body

Consider inspecting elements to determine which has the default margin or padding applied and replace * with the class, id, or element.

Using * resets default padding and margin for ALL elements (traditionally not best practice)

*{
margin: 0;
padding: 0;
}

Why Is There a Default Margin on The <Body> Element