微信小程序外边距问题

弄了个盒子 盒子里面装了个按钮 按钮写了外边距后强行把盒子带下来了 怎么解决

这是代码

.top{
  height: 400rpx;
  background-color: rgba(0, 148, 255);
}

.context{
  color: white;
}

.login_btn{
  margin-top: 30rpx;
}
.root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pitch{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}

<view class="top">
<button class="login_btn" wx:if="{{!userInfo}}" bindtap="login">微信登录</button>
  <view wx:else class="root">
    <image class="pitch" src="{{userInfo.avatarUrl}}"></image>
    <text class="context">{{userInfo.nickName}}</text>
    <button bindtap="loginOut" type="warn">退出登录</button>
     </view>
</view>

margin-top塌陷问题的现象与解决_FreeSpider-CSDN博客_margin-top 塌陷 margin-top塌陷问题什么是margin-top塌陷margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。在未给子元素（绿色部分）添加margin-to... https://blog.csdn.net/weixin_40612082/article/details/80461818