Why is there a default margin on the <body> element?

It's probably because most developers were jumping right into building sites and apps without taking the extra steps to make sure there was proper spacing around the body's edges, which makes text run right up against the edges of the screen.

Experienced developers should take the extra steps to reset the styles if they want full control, but I think the auto styling is the lesser of 2 evils. Think of all the people out there building simple websites using GoDaddy or other similar hosting services.


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

Tags:

Html

Css