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

Question

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

今天第一次学习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;
}

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

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

Answer 1

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

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

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

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

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