水平与垂直边距

边距

• 目前的边距值，通过@/var.scss (opens new window) 对 @/uni.scss (opens new window) 的相关变量遍历了对应的边距。
• 如有不懂的联系我QQ:2052021114

自动生成的边距有：padding、margin

• sm:10upx、base:20upx、lg:30upx
• 水平方向左右边距sm、base、lg
• 垂直方向左右边距sm、base、lg
• 全方位边距sm、base、lg

padding 下面显示的值是变量的值

水平间距

.padding-row-sm {
  padding-left: 10upx;
  padding-right: 10upx;
}

.padding-row-base {
  padding-left: 20upx;
  padding-right: 20upx;
}

.padding-row-sm {
  padding-left: 30upx;
  padding-right: 30upx;
}

垂直间距

.padding-col-sm {
  padding-top: 10upx;
  padding-bottom: 10upx;
}

.padding-col-base {
  padding-top: 20upx;
  padding-bottom: 20upx;
}

.padding-col-sm {
  padding-top: 30upx;
  padding-bottom: 30upx;
}

全方位

.padding-sm {
  padding: 10upx;
}

.padding-base {
  padding: 20upx;
}

.padding-sm {
  padding: 30upx;
}

单个方位

.padding-top-sm {
  padding-top: 10upx;
}

.padding-right-sm {
  padding-right: 10upx;
}

.padding-bottom-sm {
  padding-bottom: 10upx;
}

.padding-left-sm {
  padding-left: 10upx;
}

.padding-top-base {
  padding-top: 10upx;
}

.padding-right-base {
  padding-right: 10upx;
}

.padding-bottom-base {
  padding-bottom: 10upx;
}

.padding-left-base {
  padding-left: 10upx;
}

.padding-top-lg {
  padding-top: 10upx;
}

.padding-right-lg {
  padding-right: 10upx;
}

.padding-bottom-lg {
  padding-bottom: 10upx;
}

.padding-left-lg {
  padding-left: 10upx;
}

margin 下面显示的值是变量的值

水平间距

.margin-row-sm {
  margin-left: 10upx;
  margin-right: 10upx;
}

.margin-row-base {
  margin-left: 20upx;
  margin-right: 20upx;
}

.margin-row-sm {
  margin-left: 30upx;
  margin-right: 30upx;
}

垂直间距

.margin-col-sm {
  margin-top: 10upx;
  margin-bottom: 10upx;
}

.margin-col-base {
  margin-top: 20upx;
  margin-bottom: 20upx;
}

.margin-col-sm {
  margin-top: 30upx;
  margin-bottom: 30upx;
}

全方位

.maring-sm {
  maring: 10upx;
}

.maring-base {
  maring: 20upx;
}

.maring-sm {
  maring: 30upx;
}

单个方位

.margin-top-sm {
  margin-top: 10upx;
}

.margin-right-sm {
  margin-right: 10upx;
}

.margin-bottom-sm {
  margin-bottom: 10upx;
}

.margin-left-sm {
  padding-left: 10upx;
}

.margin-top-base {
  margin-top: 10upx;
}

.margin-right-base {
  margin-right: 10upx;
}

.margin-bottom-base {
  margin-bottom: 10upx;
}

.margin-left-base {
  margin-left: 10upx;
}

.margin-top-lg {
  margin-top: 10upx;
}

.margin-right-lg {
  margin-right: 10upx;
}

.margin-bottom-lg {
  margin-bottom: 10upx;
}

.margin-left-lg {
  margin-left: 10upx;
}

总结

.padding-row-sm {}
.padding-row-base {}
.padding-row-sm {}
.padding-col-sm {}
.padding-col-base {}
.padding-col-sm {}
.padding-sm {}
.padding-base {}
.padding-sm {}
.padding-top-sm {}
.padding-right-sm {}
.padding-bottom-sm {}
.padding-left-sm {}
.padding-top-base {}
.padding-right-base {}
.padding-bottom-base {}
.padding-left-base {}
.padding-top-lg {}
.padding-right-lg {}
.padding-bottom-lg {}
.padding-left-lg {}

.margin-row-sm {}
.margin-row-base {}
.margin-row-sm {}
.margin-col-sm {}
.margin-col-base {}
.margin-col-sm {}
.margin-top-sm {}
.margin-right-sm {}
.margin-bottom-sm {}
.margin-left-sm {}
.margin-top-base {}
.margin-right-base {}
.margin-bottom-base {}
.margin-left-base {}
.margin-top-lg {}
.margin-right-lg {}
.margin-bottom-lg {}
.margin-left-lg {}