【蓝牙小程序】wxss 样式中 margin 属性后面的四个数字分别代表什么

在微信小程序的 WXSS（WeiXin Style Sheets）样式中，margin 属性可以接受 1 至 4 个数值，用于设置元素的外边距。这四个数值分别代表不同的边距方向，具体规则如下：

---

1. margin: 上 右 下 左;（4 个值）

• 分别对应：上、右、下、左四个方向的外边距（顺时针方向）。

• 例如：

   

  margin: 10px 20px 30px 40px;

  等价于：

  • 上边距：10px

  • 右边距：20px

  • 下边距：30px

  • 左边距：40px

---

2. margin: 上 左右 下;（3 个值）

• 分别对应：上、左右、下。

• 例如：

   

  margin: 10px 20px 30px;

  等价于：

  • 上边距：10px

  • 左右边距：20px

  • 下边距：30px

---

3. margin: 上下 左右;（2 个值）

• 分别对应：上下、左右。

• 例如：

   

  margin: 10px 20px;

  等价于：

  • 上下边距：10px

  • 左右边距：20px

---

4. margin: 全部;（1 个值）

• 所有四个方向的外边距相同。

• 例如：

   

  margin: 10px;

  等价于：

  • 上、右、下、左边距均为 10px。

---

补充说明

• 单位可以是 px、rpx（响应式像素）、% 等。

• 类似规则也适用于 padding 属性。

• 如果某个方向不需要边距，可以设为 0。

例如：

margin: 0 auto; /* 上下边距为0，左右自动居中（常用水平居中） */