Menu
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
465
The body element generally has an 8px margin by default in some browsers so you need to control it in your own stylesheet instead and set it to what you want. Historically some browsers used padding and some used margin and some applied them to the html element instead of body.
User-agent, or browsers, have basic style sheets that give default styles to any document. These style sheets are named user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.
The margin property sets or returns the margins of an element. This property can take from one to four values: One value, like: div {margin: 50px} - all four margins will be 50px. Two values, like: div {margin: 50px 10px} - the top and bottom margins will be 50px, left and right margins will be 10px.
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.
162
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
