36

For most of my development career, I've only had to dabble in front-end, web based UI development. One thing has always bugged me is the constant need to reset browser-based styling "assumptions", which I've often forgotten until these defaults started effecting the layout of my pages.

The biggest assumption that most browsers make is that the HTML <body> element should have a margin, which almost always is 8px.

What was the design decision for this defaulted margin?

In fact, this margin is so undesirable that it is essentially standard practice to include this type of styling in a .css file which is included with every page of a site:

html, body
{
    margin: 0px; padding: 0px
}

IMHO, logic would dictate that most developers would want a full, blank slate that they can work with and format at their own discretion. With the browser defaulting a margin around the body element, the designer must remain conscientious of the spacing and add code to calculate correct layout for their inner elements if they don't reset the layout.

For what reason did the original developers of HTML browsers, or the initial HTML spec, decide to throw this default margin on all body elements?

RLH
  • 15,230
  • 22
  • 98
  • 182
  • 3
    My guess is that they wanted unstyled pages to not look completely ugly, but that's just a hunch. – Kevin Ji Dec 31 '15 at 18:45
  • 3
    Because letters that are right up against the edge of the window can be hard to read? – John Hascall Dec 31 '15 at 18:45
  • It’s probably historical compatibility. Back then, not all browsers supported the same CSS rules or any CSS rules, but most browsers rendered a margin, so this got adopted as a de-facto standard. That’s my guess. – Sebastian Simon Dec 31 '15 at 18:49
  • 1
    It's not just the body, heading, paragraphs, menus all have some default styling...as to why...that's a question for the W3C...not Stack Overflow. – Paulie_D Dec 31 '15 at 18:53
  • 3
    http://www.w3.org/TR/html5/rendering.html –  Dec 31 '15 at 19:07
  • 1
    I've voted to close this as POB because "is there any *good* reason X person did Y" is ultimately an opinionated question depending on what the beholder thinks is "good". There are definitely *reasons*, but even the answer to what those reasons are could only be given by the vendors themselves... and they don't frequently answer Stack Overflow questions. – TylerH Jan 01 '16 at 07:12

2 Answers2

35

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

Anders Evensen
  • 579
  • 5
  • 15
LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • This makes sense. Do you have any reference material that either further discusses these concepts, or links to old BBS discussions? – RLH Dec 31 '15 at 19:05
  • I am looking for it as we speak. I remember reading into this a while back. Give me a minute\ – LOTUSMS Dec 31 '15 at 19:05
  • 3
    @RLH - unfortunately these decisions were taken at a time when w3c discussions were private. not through the public channels that we have today. But this is correct - indeed, it would have been a no-brainer - backward compatibility with extant web pages has always been an important goal, and the defaults were necessary for that to happen when CSS was added. – Alohci Dec 31 '15 at 19:16
2

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.

HaulinOats
  • 3,628
  • 4
  • 21
  • 24