小程序wxss 距离上方产生距离

问题遇到的现象和发生背景

今天第一次学习wxss的，格式遇到问题，block我理解的意思就是可以看作一个模块，现在的问题是我想让第一个距离上方产生一定距离，而其他的不变，这该怎么改
现在

目的样式

问题相关代码，请勿粘贴截图

 wxml

<view  class="article-block" wx:for="{{ ArticleLists }}" wx:key="index" bindtap="copybv" data-bv="{{ item.bv}}">
    <view class="article-text">
      <view class="article-title">{{ item.title }}view>
  view>
view>

wxss
.article-block {
  display: flex;
  height: 50rpx;
  width: 350rpx;
  margin: 0rpx 50rpx 0 50rpx;
  padding: 20rpx 0 20rpx 0;
  border-top: 1rpx solid rgba(222, 222, 222, 0.5);
}

.article-text {
  position:absolute;    /* 父元素绝对定位 */
  flex: 1;
  height: 22rpx;
  width: 1000rpx;
}

.article-title {
  position: absolute;    /* 垂直居上 */
  top: 10rpx;    /* 垂直居上 */
  font-size: 28rpx;
  padding-bottom: 10rpx;
  font-weight: bold;
}

我的解答思路和尝试过的方法

希望各位帮忙解答一下，万分感谢

1. 第一种：外面包一层，修改整个列表上边距
   ```javascript

.article-block-wrapper {
margin-top:50rpx;
}

2. css 选择器修改第一个元素

```css
.article-block: nth-of-type(1) { margin-top:50rpx; };

3. 通过 index === 0 判断是否需要新增上边距

列表 只让 第一个 产生距离 。那你可以用 .article-block ：first-child{} 或者 动态加样式 也就是类名 。

class="{{index==1?"xx":"article-block"}}" 或者 直接style 也行

正常 制作思路是 首先 得出 列表第一个元素高度 ，判断上下滑动高度和这个列表第一个元素的高度 ，如果大于时采用大于的样式，小于则采用小于的样式！