Question

我有一个简单的div，其背景颜色在CSS中定义。有一些文本我希望在某个位置显示在这个div上，但是当我填充div时它会导致背景移动：

#body {
   margin-left: 10px;
   background: red;
}

我只想让文字转移。如何在不使用两个div标签的情况下执行此操作？

感谢。

编辑：以下是我正在使用的示例：http://jsfiddle.net/qQxF2/

Answer 1

如果您没有边框，请使用padding代替margin。

#body {
    padding-left: 10px;
    background: red; /* this is not valid CSS! */
    background-color: red; /* this is valid */
}

W3C在the box model上有一个广泛的（希望）准确的文本，以及填充，边距，边框等内容。

Answer 2

我通常会添加外部div（<div class="outer"><div class="inner">text</div></div>）来解决此问题

.outer {
    background-color: red;
}
.inner {
    padding-left: 10px;
}

Answer 3

为什么不在实际的身体标签上设置背景颜色？

body {
    background-color: red;
}

#body {
    padding-left: 10px;
}

Answer 4

此外，您可以随时将填充应用于文本本身，具体取决于您实际将在容器div中拥有多少内容。你真的不想命名div体，因为那不是很语义。您可能希望将其更改为#container或类似的东西，这样您就不会养成坏习惯。 body应该是页面主体，而不是div。

如果你想要有文字，你可以这样做：

 #container { background-color: red; }
 #container p { margin-left: 10xp; }

否则，如果您在父div中混合使用标签和内容，并且您不想单独应用边距（尽管从技术上讲，您应该避免养成只是嵌套无关div的习惯），尼基塔的答案应该对你有用，假设你只想要容器div上的背景而不是整个页面本身。

Answer 5

应用填充不应该移动背景。

设置margin属性时应该移动背景。

尝试遵循......

<html>
<head>
<style type="text/css">

.padding
{
background-color:yellow;
padding-left:150px;
}

.margin
{
background-color:yellow;
margin-left:150px;
}
</style>
</head>

<body>

<div class="padding">This is a paragraph with padding.</div>
<br/>
<div class="margin">This is a paragraph with margin.</div>

</body>

</html>

CSS问题：如何防止背景受到填充的影响？

5 个答案: