Hi there everyone!
I’ve got a page that seems to have an 8 px margin set by user-agent stylesheet, per my inspector but I don’t understand why. I didn’t intentionally set it either in my stylesheet or my HTML. Can someone tell me what is setting this margin and how I can override it?
Inspector says:
It is most likely the browser’s default.
setting margin: 0; on the body should fix it.
Its the UA (User Agent) default stylesheet which sets a set of rules for all elements (all elements are display:inline by default) and for some elements the UA will add margins or padding or both. That’s why reset (or normalise) stylesheets cropped up so that all browsers could start on an even keel.
Have you never noticed the default margins on a p tag or an h1 tag or the default bullet on a list. These are all set in the UA stylesheet,
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. Therefore I always include this in my default stylesheet.
html,body{margin:0;padding:0}
The browser is expected to use a default style sheet to make an unstyled html readable. It’s up to the browser vendor to choose what they see fit, so there are variations.
The W3.org has listed some recomendations for this if you like to check them out:
The CSS user agent style sheet for HTML 4:
https://www.w3.org/TR/CSS2/sample.html
The CSS user agent style sheet for HTML 5:
https://www.w3.org/TR/html5/rendering.html#the-page
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.