0

为什么body元素的可绘制区域包括边距？可以改变吗？

这是一个示例（您也可以使用您喜欢的编辑器）：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    margin: 25px;
    background-repeat: no-repeat;
    background-origin: content-box;
}

h1 {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    background-attachment: scroll;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

如果比较这两个元素，则background-imagefor ah1元素不会填充边距区域，而它会填充body元素。如果我在 CSS 规范中遗漏了这一点，你能帮我找到参考吗？

我试图用background-origin: content-boxforbody来改变这种行为，但这没有用。

另外，如果我删除了元素的background-repeat属性，那么它也会延伸到它的边框中，为什么会发生这种情况？h1background-image

4

2 回答 2

0

CSS 中的边距设置您不能在其中渲染元素的区域量，就像它描述边距一样。

这种行为可以用盒子模型来解释。

因此，如果您将边距设置为 25px，则意味着它不会让您在其中绘制与该元素相关的任何内容。

我认为您正在寻找的代码（我假设）是：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 25px;
}

#content { 
    background:url('http://www.w3schools.com/css/paper.gif');
    border: 10px dashed red;
    padding: 50px;
    background-repeat: no-repeat;
    background-origin: padding-box;
}

h1{
    background:url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    background-attachment: scroll;
}
</style>
</head>

<body>
<div id="content">
<h1>Hello World!</h1>
</div>
</body>

</html>

这将您的 CSS 与正文分开，您实际上无法应用背景来源。

于 2013-06-14T08:04:30.460 回答
0

在一些俄罗斯的绝密核火箭地下室找到解决方案：你应该将 css 边距设置为 HTML 标签，然后一切，包括身体的背景图像都会移动：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    margin: 25px;
    background-repeat: no-repeat;
    background-origin: content-box;
}

h1 {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    background-attachment: scroll;
}
html{
    margin-top: 40px;
    margin-left: 20px;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>
于 2013-06-28T13:28:50.397 回答