Question

我正在尝试在Html的可用空间两侧添加边距。并在中间剩余部分填写背景。

但是当我把它放在body标签中时，这个id不起作用。

#bodyid{
    display: block;
    margin-left:  100px;
    margin-right:  100px;
    background-color: #E3EAEA;
}

以上给定的颜色是随机的。结果应该是这样的。

capture[![this should be the result ] 1

感谢您的帮助。

Answer 1

只需将正文设为白色并添加容器div即可。就像这里：https://jsfiddle.net/p1mz721k/

Answer 2

试试这个：

<html>
<head>
<meta charset="utf-8"/>
</head>
<style>
body {margin:0; padding:0; background:#fff;}
#container{
width:800px;
height:100%;
display: block;
 margin: 0 auto;
background-color: #E3EAEA;
border-left:4px #000 solid;
border-right:4px #000 solid;
}
</style>
<body>
<div id="container"></div>
</body>
<html>

Answer 3

你有指定的高度吗？或者这个div中有内容吗？

#bodyid {
    display: block;
    background-color: #E3EAEA;
    height: 300px;
    margin: 0 100px;
}

Answer 4

保留body标签，但为其删除CSS并在其中添加div。将div的宽度设置为80％，将margin-right和margin-left设置为10％。然后将您的颜色添加到div。同时将div的高度设置为100％。

Answer 5

您可以修改内容的宽度（粉色div）吗？

如果是，请尝试：

.pinkDiv {
  width: 900px;
  margin: auto;
}

Answer 6

你现在拥有的CSS并没有完全按照自己的意愿行事，你必须在你的CSS中指定前景的大小（显然没有指定前景），基于此你可以管理背景。从前景角度思考，调整前景（彩色区域）的大小，以便获得两侧所需的边距。

我已经实施了你的要求here。

<body>
    <div id = "blck"></div>
</body>

#blck{
    width: 1050px;
    height: 1050px;
    display: block;
    background: red;
    margin-right: 100px;
    margin-left: 100px;
}

PS：此实现适用于1280像素宽屏幕。 div的宽度是1050px，因为你的要求是两边100px的边距，而div隐含的15px边距。

在Html-css页面中添加自由空间（背景）两侧的边距

6 个答案: