2

So i have set my body's height and width to be 100px each and given it a background color of Red and border of 10px solid black. Why instead of 100x100 red box with a black border, i see Red color all over the screen with the border having expected dimenstions.

html, body{
    height:100px;
    width:100px;
}

body{
    background-color: red;
    font-size: 60px;
    border:10px solid black;
}
<body>
</body>
Yogesh Bhatt
  • 127
  • 2
  • 9

2 Answers2

2

That is weird. That's not what I would have expected, but this seems to indicate it's a known behavior, that if the background color on <html> isn't set, but the background color on <body> is, the <body> background will flood the whole <html> area.

To quote the spec:

For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element.

You can also see an example at that spec link that is similar to yours.

UPDATE:

RE: your other question about <html> element's propagating to the viewport's background, I think that is also answered in a nearby section of the spec, though it is a little less clear to me:

The background of the root element becomes the canvas background and its background painting area extends to cover the entire canvas.

Note canvas in this case refers to the infinite surface the page is rendered on, not the HTML5 canvas. This seems to me to describe the behavior you mentioned in a comment where the background of a <html> with a small width/height is propagated to the viewport, though why they need the additional section I quoted above, I'm not sure about. There is more info at that link if you are curious. There seems to be some overlap between sections AFAICT.

xdhmoore
  • 8,935
  • 11
  • 47
  • 90
  • yes indeed the body's background is propogating to html but now the same issue is with html. i have set 100x100px height and width dimensions with 10 px black border. instead of seeing a 100x100px blue box, the background is overflowing all over the screen with the border having expected demenstions. `body, html{ height:100px; width:100px; } html{ background-color: aqua; border:10px solid black; }``body{ background-color: red; font-size: 60px; border:10px solid black; }` – Yogesh Bhatt Feb 21 '21 at 03:17
  • What are you trying to accomplish? Why do you need to make the html and body elements both smaller than the browser viewport? – xdhmoore Feb 21 '21 at 03:24
  • well i was just trying to see the body's border but bumped into this behaviour – Yogesh Bhatt Feb 21 '21 at 03:25
  • I'm certainly not a spec expert, but best I can tell that behavior is also covered in that area of the spec. Updated my answer. – xdhmoore Feb 21 '21 at 03:48
  • thanks hope it's a reliable source – Yogesh Bhatt Feb 21 '21 at 03:52
  • Well, they use the specs as reference for writing the browsers. Though I'm a little fuzzy about the [difference between WHATWG Specs and W3C specs](https://stackoverflow.com/a/34984276/356887) (I couldn't find a WHATWG CSS one for this answer, just the W3C one). Looking at the spec is about as reliable as you can get apart from reading the code of the various browsers. Though reading them is kindof a headache and certainly the browsers don't *have* to implement everything as described... – xdhmoore Feb 21 '21 at 03:59
1

If your goal is to create a 100x100 red box with a black border, you can create a div in your html and then give the div the properties you want in your CSS.

For example,

.red-box {
    height:100px;
    width:100px;
    background-color: red;
    border:10px solid black;
}
<html>
<body>
<div class = "red-box"></div>
</body>
</html>
Elhalvers
  • 23
  • 7