html css样式页边距未包装

我对下面的css有一些问题

.mainform{
利润率：50像素20像素；
背景色：#444；
宽度：100%；
高度：80px；
}
斯康塔纳先生{
背景色：#999；
}

TST

在父对象上使用填充，而不是在子对象上使用边距

请看这个片段：

.mainform{
背景色：#444；
宽度：100%；
高度：80px；
}
斯康塔纳先生{
背景色：#999；
填充：50px 20px；
}

TST

添加边框以使元素清晰

ScoContainer有背景：灰色，它有一个宽度为100%，高度为80px的主窗体子对象。mainform在ScoContainer中使用边距，如果没有提到边距，则ScoContainer仅具有背景色，因此仅显示mainform的样式，要使边距区域具有颜色，请尝试添加代码段中提到的边距，或在ScoContainer上指定高度和宽度

.mainform{
利润率：50像素20像素；
背景色：#444；
宽度：100%；
高度：80px；
边框：1px绿色虚线；
}
斯康塔纳先生{
背景颜色：灰色；
边框：1px纯黄色；
}

TST

如果您的边距背景颜色作为您的scocontainer div颜色，只需为scocontainer指定一个绝对位置即可。然后，它将显示为您想要的

.mainform{
利润率：50像素20像素；
背景色：#444；
宽度：100%；
高度：80px；
}
斯康塔纳先生{
背景色：#999；
宽度：100%；
位置：绝对位置；
}
TST

添加

溢出：隐藏在父级中。这是由于


.scocontainer{
背景色：#999；
溢出：隐藏；
}
.mainform{
利润率：50像素20像素；
背景色：#444；
宽度：100%；
高度：80px；
}

TST
使用“页边距”时，为什么父级没有子级页边距部分的背景色？这称为“页边距折叠”

，您可以在MDN上阅读