Padding 内补填充
| size 值表 |
|---|
| 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 200 0 |
基础用法
使用 vus-pa-{size} 类可设置元素的 padding: {size}px; 内补填充大小。
vus-pa-1
vus-pa-5
vus-pa-20
<div class="vus-pa-1"></div>
<div class="vus-pa-2"></div>
<div class="vus-pa-200"></div>
指定位置
指定内补填充位置，可随意多个混合。
| 样式名称 | 描述 |
|---|---|
| vus-pl-{szie} | padding-left (左边填充) |
| vus-pt-{szie} | padding-top (顶部填充) |
| vus-pr-{szie} | padding-right (右边填充) |
| vus-pb-{szie} | padding-bottom (底部填充) |
vus-pt-2
vus-pl-15
vus-pt-20
vus-pb-10
vus-pr-30 vus-pt-4 vus-pl-9 vus-pb-7
<div class="vus-pl-1"></div>
<div class="vus-pt-2"></div>
<div class="vus-pr-100"></div>
<div class="vus-pb-200"></div>
<div class="vus-pt-10 vus-pb-5"></div>
<div class="vus-pl-20 vus-pt-10 vus-pr-50"></div>
响应式方案
响应式预设了四个响应尺寸：
| 分辨率 | ≥567px | ≥768px | ≥1024px | ≥1280px |
|---|---|---|---|---|
| padding | vus-pa-xs-* | vus-pa-sm-* | vus-pa-md-* | vus-pa-lg-* |
| padding-left | vus-pl-xs-* | vus-pl-sm-* | vus-pl-md-* | vus-pl-lg-* |
| padding-top | vus-pt-xs-* | vus-pt-sm-* | vus-pt-md-* | vus-pt-lg-* |
| padding-right | vus-pr-xs-* | vus-pr-sm-* | vus-pr-md-* | vus-pr-lg-* |
| padding-bottom | vus-pb-xs-* | vus-pb-sm-* | vus-pb-md-* | vus-pb-lg-* |
<div class="vus-pa-1 vus-pa-xs-2 vus-pa-sm-3 vus-pa-md-4 vus-pa-lg-5"></div>
<div class="vus-pt-1 vus-pt-xs-2 vus-pt-sm-3 vus-pt-md-4 vus-pt-lg-5"></div>
<div class="vus-pb-1 vus-pb-xs-2 vus-pb-sm-3 vus-pb-md-4 vus-pb-lg-5"></div>