如何在没有填充区域的情况下背景化 div答案

【问题标题】：How to background a div without the padding area如何在没有填充区域的情况下背景化 div
【发布时间】：2020-03-10 02:09:55
【问题描述】：

我在 CSS 上有这门课：

.mgmtError{ 
  width:716px; 
  float:left; 
  background-color:#FF0000; 
  padding:10px; 
  text-align:center;
}

我想给不在填充区域的背景上色。我尝试了margin，但IE似乎有些问题。

还有其他解决方案吗？

【问题讨论】：

你能显示你的 HTML 标记吗？
内边距区域是 DIV 的一部分，因此您不能说“在 DIV 的一部分中具有背景 A，在同一 DIV 的其他部分具有背景 B”。
IE使用margin有什么问题？
@DanielB ：有时，如果没有下一个浮动元素，margin-bottom 会失败；我认为这是一个普遍的问题......
我猜你可以在 div 中使用 div .. 来模拟填充，较大的 div 没有颜色

标签： html css

【解决方案1】：

你可以使用

background-clip: content-box;

还要确保使用background-color 属性，而不是background。

【讨论】：

这是css3，IE 9.0之前不能用，为什么不能用margin代替padding？
这是一个不错的解决方案。但是当您使用background-image: linear-gradient() 时，您不能使用百分比色标。我想这很明显，因为它是内容剪辑，但我尝试了一段时间
我找到了background-origin: content-box的解决方案
我不明白，每个人都说“很棒”并且超过 200 +1 但这对我不起作用。有任何想法吗？内边距和背景以相同的颜色显示
@GilEpshtain 你可以通过例如提供 MCVE jsfiddle？否则，您的评论没有多大用处。

【解决方案2】：

如果您能够访问 HTML，请尝试：

.mgmtError {
  width: 716px;
  float: left;
  padding: 10px;
  text-align: center;
  background-color: blue;
}

.mgmtError div {
  background-color: #FF0000;
}

<div class="mgmtError">
  <div>Content</div>
</div>

【讨论】：

下面@Yacine 的回答似乎更好。