margin-top不生效原因

当两个垂直相邻的元素都具有margin时，它们的垂直边距会发生合并，即取其中较大的一个作为最终的边距值。但是，如果其中一个元素具有边框（border）、填充（padding）或内联内容（例如文字），那么它的边距将不会与相邻元素的边距合并。

这是我的css

.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 属性来防止边距合并。

要取消边框合并，可以通过使用一些技巧来改变元素的边框或边距

1. 使用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;
}

1. 添加空的内联内容：在.invoice-navigater元素内部添加一个空的内联元素（例如::before伪元素），并为其设置适当的高度。这样，边框不会与父元素的边距合并。

css

.invoice-navigater::before {
  content: "";
  display: inline-block;
  height: 20rpx;
  vertical-align: middle;
}

1. 使用伪元素：使用一个额外的伪元素来创建边框效果，而不是直接应用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;
}

通过使用上述方法之一，可以防止边框与父元素的边距合并，从而实现取消边框合并的效果。请根据您的具体需求选择适合的方法。