Background-Color of BODY tag applied to the whole HTML [duplicate]

后端未结

关注

 4  1258

盖世英雄少女心

相关标签:

4条回答

孤独总比滥情好

2020-12-03 18:02

The body is a special HTML tag, and ordinarily covers the entire HTML page. Try the following:

<body>
    <div id="content">
        Content goes here
    </div>
</body>

and the CSS to accompany it would be:

body{
    /* whatever body related codes you'd like to use go here */
}

#content{
    padding: 0px;
    height: 100px;
    background-color: #e5e5e5;
}

0 讨论(0)

别那么骄傲

2020-12-03 18:05

This is indeed confusing, but it is specified in the CSS 2.1 specification, clause 14.2 Background: if the computed value of background-color is transparent and the computed value of background-image is none for the html element (as things are by default), browsers must instead use the computed value of the background properties for the body element and must not render a background for body (i.e. make it transparent). That is, body background magically turns to html background if html lacks a background of its own – and this only affects background properties, not the true height of the body element.

I haven’t seen any rationale for this odd rule, which prescribes a kind of “reverse inheritance”. But it’s clearly specified in CSS 2.1 and applied by browsers.

As explained in other answers, you can make your content have a background of specific height either by setting a background on html (so that body background is really applied to body only) or by using wrapper element inside body and setting height on it (since the special rule applies to body only).

Thanks to Anne van Kesteren who pointed to the CSS spec when I asked about this in the WHATWG mailing list. (I thought I knew CSS 2.1 by heart but really didn’t. ☺)

0 讨论(0)
发布评论:

提交评论
- 加载中...
日久生厌

2020-12-03 18:15
Many web developers do not understand the difference between applying style to the body element versus the html element. Most of the time these authors will apply style only to the body element; when that's not sufficient, they'll spam all sorts of styles on both html and body until the page happens to look correct.

The confusion is understandable. In the beginning, both were treated similarly, with attributes like background-color being applied to the body tag, affecting the whole page.

EDIT: To simplify thing i have added a fiddle to demonstrate how the background-color gets applied.So if you specify the background color for the body and you DONT want it to spread to the whole page you must specify the background-color for HTML too

FIDDLE

CSS
```
html{
    background-color:yellow;
}
body{
        padding: 0px;
        height: 100px;
        background-color: red;
    }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
庸人自扰

2020-12-03 18:27

You should explicitly specify a background color for the html tag (as browsers add it automatically), otherwise, the background of the body is spread all over the document.

0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题