Why doesn't HTML body background-color obey margin?

Question

According to w3, the margin of an element is transparent:

I've built a very basic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body {
            background-color: red;
        }
    </style>
</head>
<body></body>
</html>

In Chrome, the inspector reports that "body" has an 8px margin:

But on the page, the margin is full of the background color! (Notice that there's no space between my bookmarks bar and the red background - I promise I haven't scrolled.

What's up with that?

Possible duplicate of [HTML default body margin](http://stackoverflow.com/questions/13127887/html-default-body-margin) — Ranveer, Jan 08 '16 at 16:04
@Ranveer That seems tangentially related at best, and not at all a duplicate. — user229044, Jan 08 '16 at 16:05
Whoops, sorry for flagging it that way, I didn't know that this wasn't a part of w3 convention. It is so usual that I assumed it to be that way :/ — Ranveer, Jan 08 '16 at 16:09

score 7 · Accepted Answer · answered Jan 08 '16 at 16:02

The CSS specification special cases it.

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

… presumably because people were too used to <body background="#ff0000"> from the bad old days.

I think they had to add the special case for compatability to older HTML-Projects, that had no margin, and then would have looked diffrent — CoderPi, Jan 08 '16 at 16:03

Why doesn't HTML body background-color obey margin?

1 Answers1

Linked

Related