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

Question

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

Answer 1

您正在寻找的属性是 background-clip

div {
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 30px solid transparent;
    background-color: blue;
}
.test1 {background-clip: content-box;}
.test2 {background-clip: padding-box;}
.test3 {background-clip: border-box;}

<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>

另一个解决方案，将两者结合在一个 div 中

div {
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 30px solid transparent;
    background-image: linear-gradient(0deg, yellow, yellow), 
                      linear-gradient(0deg, green, green), 
                      linear-gradient(0deg, blue, blue);
    background-clip: content-box, padding-box, border-box;
}

<div></div>

Answer 2

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

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

您不能为填充或边距着色，但让我建议一个小技巧，让它看起来像您可以（没有 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>