why do browsers style a predefined margin into all webpages?

StackOverflow https://stackoverflow.com/questions/19567547

  •  01-07-2022
  •  | 
  •  

Question

Why do all browsers style an arbitrarily sized margin on the <body> element of all webpages?* I'm not surprised by this, as I've been making webpages for years now, but I just assumed it was part of the spec, in the same way text inside <strong> should be bold. But, as seen in HTML5, HTML 4.01, HTML 4.0, HTML 3.2, and even HTML 2.0 and the RFC Definition, default styles are never even mentioned!

I can't find any definitions of HTML before 2.0, which was released upon the world in 1995, so why would all browsers insert the very specific 8px margin on all webpages*, especially in these days where every website removes it in the first few lines of CSS (even the HTML 4.01 spec's stylesheet does this) or a normalize/reset stylesheet? Sure, one could argue that ancient websites like the above listed HTML 3.2 spec rely on this, but they really don't look bad without the margin (try removing it with your browser inspector).

*** by "all browsers", I mean all versions of Chrome, Firefox, IE, Opera, and Safari, including all related obsolete versions, betas, alphas, and nightlies, as of this question.

Was it helpful?

Solution

Browsers have to have a default rendering of some kind (author stylesheets didn't exist when HTML was first introduced and are still an optional extra today).

If there was no margin/padding on the body/html then the text would run up against the window border and toolbar where it would be very hard to read (which would be a poor choice for a default rendering).

why would all browsers insert the very specific 8px margin on all webpages

"But it looks different in Netscape" was a common complaint. Browsers copied the default rendering from each other to compensate for authors writing pages and only thinking about one browser.

where every website removes it in the first few lines of CSS

Not every website does. It's a common (but not universal) practise for sites which are going to include a stylesheet, but not all sites do.

OTHER TIPS

The style sheet you mention at http://www.w3.org/StyleSheets/TR/W3C-REC removes the margin but also applies a padding to the body, moving the text away from the browser chrome for readability..

Browsers must have at least some default styling of HTML elements in order to convey hierarchy and structure.

Update: you can view user-agent stylesheets at the following:

To add a bit to the other answers, Web Browsers were marketed very differently in the 90s than they are today, and they also included different components. One such component included with the Netscape suite (remember, at this time, Netscape was the only dog in town, and you had to purchase it) was an HTML editor called Netscape Composer. I would imagine that when Microsoft released IE to compete, they likely had some similar feature, thus using their own default styling (though I don't recall what it was, I wasn't even thinking of developing back then). My best guess is that these HTML editor features contributed at least to some degree to the default stylings of the different web browsers.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top