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

我想给

的边距和填充上色，这样我就可以在教育上使用它来表示CSS中的长方体模型。如何为这些元素设置颜色？

无法设置填充和边距属性的背景颜色。它们是透明的或不可见的，仅用于定位目的

然而，我已经听过很多次这个问题，我完全理解为了纯粹的教育目的而想要显示填充和边距。因此，我使用CSS的

：before

和

：after

psuedo元素创建了一个简单的小“hack”来表示box模型

您不能对填充或边距进行着色，但让我建议进行一些修改，使其看起来可以（不使用JavaScript！）：

模拟盒子模型：

#框{
宽度：150px；
高度：150像素；
背景：绿色；
位置：相对位置；
边框：10px纯蓝色；
左：50px；
顶部：50px；
}
#盒子：之前{
背景：红色；
内容：“边界”；
显示：块；
位置：绝对位置；
顶部：-30px；
左：-30px；
右：-30px；
底部：-30px；
z指数：-1；
}
#盒子：之后{
背景：灰色；
内容:"保证金";；
显示：块；
位置：绝对位置；
顶部：-50px；
左：-50px；
右：-50px；
底部：-50px；
z指数：-2；
}

---

#box

您要查找的属性是背景剪辑

div{
宽度：100px；
高度：100px；
填充：30px；
边框：30px实心透明；
背景颜色：蓝色；
}
.test1{背景剪辑：内容框；}
.test2{背景剪辑：填充框；}
.test3{背景剪辑：边框框；}