css - 我可以为边距和填充设置背景颜色吗？

我想为 <div> 的边距和填充着色，以便我可以在教育上使用它来表示 CSS 中的框模型。如何为这些元素设置颜色？

最佳答案

无法设置 padding 和 margin 属性的 background-color 。它们是透明的或不可见的，仅用于定位目的。

但是，我已经多次听到这个问题，我完全理解出于纯粹的教育目的想要显示填充和边距。因此，我使用 CSS 的 :before 和 :after 伪元素创建了一个简单的小“hack”来表示盒模型。

您不能为填充或边距着色，但让我建议一个小技巧让它看起来像您可以(没有 JavaScript!):

模拟盒模型:

#box {
  width: 150px;
  height: 150px;
  background: green;
  position: relative;
  border: 10px solid blue;
  left: 50px;
  top: 50px;
}
#box:before {
  background: red;
  content: 'border';
  display: block;
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  z-index: -1;
}
#box:after {
  background: gray;
  content: 'margin';
  display: block;
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
  z-index: -2;
}

<div id="box">#box</div>

关于css - 我可以为边距和填充设置背景颜色吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27530434/