为什么给top设置margin-top后页面就有滚动条了 index的高度明明是够的啊

<view class="index">
    <view class="top">
    </view>
</view>

.index{
  width: 750rpx;
  height: 100vh;
  box-sizing: border-box;
}
.top{
  width: 686rpx;
  height: 120rpx;
  background-color: white;
  border-radius: 10rpx;
  margin-top: 40rpx;
  margin-left: 32rpx;
}

这个top的margin-top会影响父元素 可以给index设置padding-top实现你想要效果