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

Posted 2023-02-21

【中文标题】CSS：仅在边距内的背景颜色

【英文标题】：CSS: background-color only inside the margin

【发布时间】：2012-04-20 09:14:48

【问题描述】：

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

如何使用 CSS 做到这一点？

【问题讨论】：

你只有有背景在边距内。盒子型号：w3.org/TR/CSS2/box.html

如果您使用填充而不是边距，它将具有您为元素选择的背景颜色

【参考方案1】：

如果你的margin设置在body上，那么设置html标签的背景颜色应该给margin区域着色

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

http://jsfiddle.net/m3zzb/

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

【讨论】：

或在body 中放置一个div #main_container 来做同样的事情

如果你的 html 标签上的背景颜色不是白色，当页面第一次加载时，颜色会占据整个页面一秒钟，然后正文的颜色才会生效，所以它看起来有点奇怪。

@AlexF - Outlook 电子邮件不是标准的 html，您可以做的事情非常有限。

【参考方案2】：

你能用边框代替边距吗？无论如何，您应该使用<div> 来执行此操作。

像这样？

http://jsfiddle.net/GBTHv/

【讨论】：

嗨，我做过类似的事情，但是边框内的背景颜色只延伸到边距内文本的底部。我需要它在整个边缘区域内.. 如果这有意义的话。

@user1318194 - 我认为您对保证金的含义感到困惑。边距是元素周围的区域，所以像上面这样的边框就是边距。

是的，但是您可以通过百分比设置边距 - 不能设置边框。因此，如果您想要左右 1% 的边距，您将无法使用边框来做到这一点。

【参考方案3】：

我需要类似的东西，并想出了使用 :before（或 :after）伪类：

#mydiv 
   background-color: #fbb;
   margin-top: 100px;
   position: relative;

#mydiv:before 
   content: "";
   background-color: #bfb;
   top: -100px;
   height: 100px;
   width: 100%;
   position: absolute;

JSFiddle

【参考方案4】：

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

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

htmlmargin:0;padding:0;

【参考方案5】：

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

outline-color: green;