HTML和CSS——边距问题

如果在第一个框（红色框）上放置边距顶部，则会拉动或影响包含框（容器）。为什么?

.red\u框{
背景色：红色；
边缘顶部：10px；
右边距：20px；
边缘底部：20px`
左边距：40px；
高度：100px；
宽度：300px
}
.绿盒子{
背景颜色：绿色；
边缘顶端：40px；
右边距：20px；
边缘底部：20px；
左边距：40px；
高度：100px；
宽度：300px
}
.集装箱{
宽度：500px；
高度：500px；
背景颜色：黄色；
}

红盒子
绿箱

这种行为的原因是：

在CSS中，两个或多个框（可能是同级框，也可能不是同级框）的相邻边距可以合并形成一个边距

您可以使用

.container

上的规则来阻止它：

.red\u框{
背景色：红色；
边缘顶部：10px；
右边距：20px；
边缘底部：20px`
左边距：40px；
高度：100px；
宽度：300px；
}
.绿盒子{
背景颜色：绿色；
边缘顶端：40px；
右边距：20px；
边缘底部：20px；
左边距：40px；
高度：100px；
宽度：300px
}
.集装箱{
宽度：500px；
高度：500px；
背景颜色：黄色；
溢出：隐藏/*