css外边距合并-塌陷问题

1.合并现象

场景：垂直排列的兄弟元素，上下margin会合并
现象：取连个margin中较大的值生效
如：

.z1 {
margin-bottom: 10px;
}

.z2 {
margin-top: 50px;
}

上下间距只显示为50px

2.塌陷问题

场景：父子级的标签，子级的添加，上外边距会产生塌陷问题
现象：导致父级一起向下移动
2023-09-09T05:28:32.png
推荐使用padding: ;内边距