body d的background_Html5_论坛

body d的background

xi***xu 分类：Html5 人气：964 回帖：2 发布于6年前收藏

body 设置了background-color 也设置了margin:10px 但是页面外边框处依然能显示背景颜色

background-color 不是应该在包裹在 margin里面么?

小弟刚学CSS 问题比较蠢请各位大神不惜批评指正

标签：html html5

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv4 码徒

朱***叶 UI设计师 6年前#1

body是可以添加margin,padding属性，设置margin,padding的展示效果没有差异，原理上一个是外边距，一个是内边距，其中子元素对于该值没有影响，即浏览器不会出现滚动条

Lv3 码奴

34***86 JAVA开发工程师 6年前#2

刚看到这个问题，以为是你哪里设置有问题，用jsfiddler复现了，立刻意识到这个问题有一定价值。

所以，我查看了文档后，找到了这么一段话。

For documents whose root element is an HTML HTML element [HTML401] or an XHTML html element [XHTML11]: 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. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

参考:The Canvas Background and the HTML <body> Element

简单来说，如果html元素的background-image是none,并且background-color是transparent(当然这个是默认值)。UA应该从他的body子元素中借用属性来styling。也就是说，它应该满足两个条件。

所以只要任意一个不符合，浏览器就不会扩大绘制区域了。

DEMO

望采纳！

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取