Html 如何阻止保证金崩溃

我正在学习使用flex布局的HTML，但遇到了页边空白的问题。我知道问题是设置了两个相邻的具有边距属性的块元素，将发生边距折叠。这些是具有相同级别的元素。如何防止页边距塌陷，以便可以自由设置这些元素的页边距顶部和底部？我希望每个元素都有12像素的上边缘和下边缘。 这是我的代码，边距正在塌陷：

布局图01
html{
框大小：边框框；
字体大小：62.5%；
}
* {
框大小：继承；
字体大小：继承；
}
.行{
显示器：flex；
/*flex-flow：行nowrap*/
左边距：-12px；
右边距：-12px；
}
上校{
左侧填充：12px；
右侧填充：12px；
}
上校12{
弹性基准：100%；
}
上校11{
弹性基准：91.667%；
}
上校10{
弹性基准：83.333%；
}
.col-9{
弹性基准：75%；
}
.col-8{
弹性基准：66.667%；
}
上校7{
弹性基准：58.333%；
}
.col-6{
弹性基准：50%；
}
上校5{
弹性基准：41.667%；
}
.col-4{
弹性基准：33.333%；
}
上校3{
弹性基准：25%；
}
.col-2{
弹性基准：16.667%；
}
.col-1{
弹性基准：8.333%；
}
.行{
边缘顶部：12px；
边缘底部：12px；
}
.行项目{
高度：100px；
}
.盒子{
背景颜色：橙色；
宽度：100%；
身高：100%；
}