html - CSS：仅在边距内的背景颜色

Question

我已经搜索了答案，但在任何地方都找不到。我的问题相当简单：我的身体有一个背景颜色，然后是一个很大的边距，现在我想要在边距内使用不同的背景颜色。

我如何用 CSS 做到这一点？

Answer 1

如果您的边距设置在正文上，那么设置 html 标签的背景颜色应该为边距区域着色

html { background-color: black; }
body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

或者按照 dmackerman 的建议，将边距设置为 0，但设置您希望边距大小的边框并设置边框颜色

Answer 2

除了使用边距，您可以使用边框吗？无论如何，你应该这样做<div>。

像这样的东西？

http://jsfiddle.net/GBTHv/

Answer 3

我需要类似的东西，并想出了使用：之前（或：之后）伪类：

#mydiv {
   background-color: #fbb;
   margin-top: 100px;
   position: relative;
}
#mydiv:before {
   content: "";
   background-color: #bfb;
   top: -100px;
   height: 100px;
   width: 100%;
   position: absolute;
}

JSFiddle

Answer 4

这对于盒模型来说是不可能的。但是，您可以使用 css3 的边框图像或一般 css 中的边框颜色的解决方法。

但是我不确定您是否可能在重置时遇到问题。一些浏览器也会为 html 设置边距。有关更多信息，请参阅 Eric Meyers 重置 CSS！

html{margin:0;padding:0;}

Answer 5

您是否可能希望更改边框外的边距颜色？也许https://www.w3schools.com/css/css_outline.asp[outline][1]大纲会有所帮助？特别

outline-color: green;