详情参见 外边距折叠
在开发中, 如果发现上下边距不符合预期, 可以考虑是否发生了外边距折叠
Flex 布局可以避免这种情况
如下所示 :

flex (没有发生外边距折叠)

width: 200px
height: 200px
margin-bottom: 50px
width: 200px
height: 200px
margin-top: 30px

默认 (发生了外边距折叠)

width: 200px
height: 200px
margin-bottom: 50px
width: 200px
height: 200px
margin-top: 30px