当两个垂直相邻的元素都具有margin时，它们的垂直边距会发生合并，即取其中较大的一个作为最终的边距值。但是，如果其中一个元素具有边框（border）、填充（padding）或内联内容（例如文字），那么它的边距将不会与相邻元素的边距合并。
.container {
width: 100vw;
height: 100vh;
background-color: #efefef;
/* border: 1px solid green; */
}
.invoice-navigater {
background-color: #fff;
margin: 0 20rpx;
border-radius: 20rpx;
font-size: 26rpx;
margin-top: 20rpx;
}.invoice-navigater元素应用了border属性。这个边框会阻止它的上方边距（margin-top）与父元素.container的上方边距合并
可以使用border属性或其他具有边框、填充或内联内容的 CSS 属性来防止边距合并。
要取消边框合并，可以通过使用一些技巧来改变元素的边框或边距
使用padding：在.invoice-navigater元素上添加适当的padding-top属性，以替代使用margin-top。这样，边框不会与父元素的边距合并。
css
.invoice-navigater {
background-color: #fff;
margin: 0 20rpx;
border-radius: 20rpx;
font-size: 26rpx;
padding-top: 20rpx;
}- 添加空的内联内容：在
.invoice-navigater元素内部添加一个空的内联元素（例如::before伪元素），并为其设置适当的高度。这样，边框不会与父元素的边距合并。
css
.invoice-navigater::before {
content: "";
display: inline-block;
height: 20rpx;
vertical-align: middle;
}- 使用伪元素：使用一个额外的伪元素来创建边框效果，而不是直接应用
border属性。这样，边框不会与父元素的边距合并。
css
.invoice-navigater {
background-color: #fff;
margin: 0 20rpx;
border-radius: 20rpx;
font-size: 26rpx;
position: relative;
}
.invoice-navigater::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid green;
border-radius: 20rpx;
}通过使用上述方法之一，可以防止边框与父元素的边距合并，从而实现取消边框合并的效果。请根据您的具体需求选择适合的方法。