0

我正在编写一个非常简单的 CSS 代码，如下所示：

body {
background-color:#616161;
margin-left: 20%;
}

即使我在左侧指定了 20% 的边距，背景颜色也会影响 body 标签的边距区域。如何确保背景颜色保持在边框内？

4

2 回答 2

3

使用 div 将背景颜色放入

<html>
<body>
<div class="background">
<p>This is some text</p>
</div>
</body>
</html>

然后使用这个 CSS 来分配颜色和边距，你必须调整代码以获得你想要的宽度和高度

html{
height:100%;
}
body{
height:100%;
margin-top:0px;
margin-left: 20%;
}
.background{
min-height:100%;
height:auto;
background-color:#616161;
width:100%;
}

或者正如 miro 指出的那样：

html { background-color:#fff; }
body {
background-color:#616161;
margin:0% 0% 0% 20%;
}
于 2013-06-23T05:52:19.290 回答
0

找到了对此浏览器行为的很好描述：“body 元素上的背景属性将传播到 html 元素（视口），但前提是后者的背景属性计算值是透明的。” （链接）+（测试小提琴）。

这里最好的解决方案是使用附加的div，就像user2067005上面建议的那样。
W3C 建议：

然而，对于 HTML 文档，我们建议作者为 BODY 元素而不是 HTML 元素指定背景。对于根元素是 HTML "HTML" 元素或 XHTML "html" 元素的文档，其 'background-color' 的计算值为 'transparent' 和 'background-image' 的计算值为 'none'，用户代理必须改为使用为画布绘制背景时，从该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素计算的背景属性值，并且不得为该子元素绘制背景。这样的背景也必须锚定在同一点，就像它们只为根元素绘制时一样。（链接）

于 2013-06-23T12:09:08.097 回答