'Why special behavior of spilling background-color to all its parents only provided to Body-tag and NOT to any other tag? [duplicate]

Based on: Setting background color for <html> element (without height set to 100%) apply to the whole viewport

The question will only rise, when <body></body> tag is not touching the browser-inside-boundries, ie, we try giving margin to element (so that it also doesn't touch) the browser window. To extend this example, again, we'll give margin to <html></html> tag, so that there is a 20px gap between html element and browser-inside-area.

Now, lets see what happens?

Case-I:

html {margin:20px; border:2px solid blue;}
body {margin:20px; border:2px solid brown;}
div {margin:20px; border:2px solid red; background:yellow; height:200px; width:200px;}
<div></div>

Case-II:

html {margin:20px; border:2px solid blue;}
body {margin:20px; border:2px solid brown; background:pink;}
div {margin:20px; border:2px solid red; background:yellow; height:200px; width:200px;}
<div></div>

Now, how stupid is it - to spill the 'background of body' to element, and to the area of viewport/browser-inside-window? Though, this is intended behavior, no-doubt? but doesn't this create anomaly or wrong-implementation of background and element integrity?

Note: We may provide background of html-tag also, which would take place as follows? But, then - in earlier example if spilling is happening ...should'nt it be consistant? And, the spill of div's background, should go ... and even body & html - should have been painted yellow? (in case-I), Why the inconsistency?

Case-III:

html {margin:20px; border:2px solid blue; background:gray;}
body {margin:20px; border:2px solid brown; background:pink;}
div {margin:20px; border:2px solid red; background:yellow; height:200px; width:200px;}
<div></div>

Though :root cannot have its own background, but <html> can, so again in Case-II, body's pink color should have stopped and NOT painted <html's> background, as this is a legal element and can have its own background. Am I wrong?

htmlcss


Solution 1:[1]

Because the spec says so:

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quentin

Related Questions