（CSS初学者）这里CSS的margin为什么会是这个效果？

Question

图一是one中没有加margin的效果

图二是one中加上margin之后的效果

问：margin不是调节两个盒子之间的边距么？我的理解是one在canvas里面，那么margin应该是canvas和one的border之间的距离，为什么one会带着canvas的上边界一起下缩20px呢？难道不应该是one相对canvas下缩20px吗？
不知道我又没有表述清楚...

贴一下完整的css代码：

完整的html代码：

【先谢谢大家~】

Answer 1

这个叫边距塌陷，具体查考

https://juejin.cn/post/7025848292143529997

Answer 2

margin合并的原因 👉 外边距重叠 - MDN，有时候也会说成“外边距塌陷”。

块的上外边距 (margin-top)和下外边距 (margin-bottom)有时合并 (折叠) 为单个边距，其大小为单个边距的最大值 (或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。