-1

I am working on a video project explaining some CSS concepts. I wanted to show how the body element has a default margin applied.

This definitely used to be an issue in the past where you needed to reset the margin if you intended to uses a background color.

I just tried in every major browser and this behavior is not happening. If I set a background color, even though the body has a margin of 8px be default in chrome, the background color extends to the edges of the screen.

This is even "fixed" in IE for me.

What happened??

Ampix0
  • 135
  • 1
  • 3
  • 11

1 Answers1

1

CSS properties on <body> have special interpretation due to backwards compatibility. It all gets even weirder in quirks mode, so make sure your pages always have a valid modern DOCTYPE (e.g. <!DOCTYPE html>).

It's part of the spec, and most browsers are spec-compliant these days.

For example, when background is set on <body>, and there is no background set on the <html> element, it's interpreted as <html>'s background instead.

Kornel
  • 97,764
  • 37
  • 219
  • 309
  • How long has this been happening? I could have sworn this was an issue for me very recently. – Ampix0 May 23 '17 at 14:57
  • These quirks are as old as background colors. There have been attempts to remove them, e.g. in XHTML mode. Note that you'll get different behavior when both `html` and `body` have different backgrounds set. There's also an interaction between margins of body and elements *in* the body (margin collapsing) that might sometimes be visible. – Kornel May 23 '17 at 14:59