Browser user agent style sheet margin 8px

Question

I was just wonerdering about a white space all around a website. I found out it is there because of the user agent style sheet (Google Chrome) and there is set a margin of 8px to the body tag as default.

How to solve this is not a problem, but I am interested in the reason of this margin. I searched for it, but I only find solutions to set the margin zero, but I want to know why this margin is there.

Hope you can tell me more about these user agent stylesheets.

Greetings Philipp

Udale

Answer 1

Browsers add their own stylesheet with their proper rules to show how the web page should be rendered normally good looking for eg. some reason you'd not add css rules for headers then how it should be displayed in the browsers?

To answer the question browsers add their rules to show the web page headers how would normally look like.

Like that the browsers using margin:8px; in body to show a web page in a cleaner visual way as pointed out by @Quentin is as writing in a paper.

So, we are the developer and how should be the page rendered?

To answer this we add our own stylesheet and make our own way for visual effect on the page.

---

There are a lot of rules in the stylesheet added by browsers in default by different browsers. You can see them here for different browsers.

And you may find several css reset stylesheet googling.

---

To be frankly, if I were one of them, I would set margin to 0 and let the developer do their task (if necessary, they would add it). Alternatively, I would set padding instead of margin - if paper thing is considered. But since this is for electronic devices not for papers, I would just set everything to initial. That is margin, padding, etc. to 0 as we know x,y works from top left corner unlike bottom left corner in paper.

Also, I think they added margin because in the old days, we had table html to format the page. But today, we have no such case, and I would strongly suggest w3c to reset their old style to map new rules. If anyone officially reading this post, I hope the new browser default will rule the engine.

Gynoecium

awesome answer, awesome link. Thank you! – Udale

Answer 2

It is there because text that touches the border of the window is hard to read. i.e. for the same reason that we use margins when writing on paper.

Vendor

thanks, this is nice comparison with the writing on paper. – Udale