Margin 外补填充
| 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-ma-{size} 类可设置元素的 margin: {size}px; 外补填充大小。
vus-ma-1
vus-ma-5
vus-ma-15
<div class="vus-ma-1"></div>
<div class="vus-ma-2"></div>
<div class="vus-ma-200"></div>
指定位置
指定外补填充位置，可随意多个混合。
| 样式名称 | 描述 |
|---|---|
| vus-ml-{szie} | margin-left (左边填充) |
| vus-mt-{szie} | margin-top (顶部填充) |
| vus-mr-{szie} | margin-right (右边填充) |
| vus-mb-{szie} | margin-bottom (底部填充) |
vus-ml-10
vus-mt-5
vus-mr-15
vus-mb-50
vus-mt-10 vus-mb-5
vus-ml-10 vus-mt-5 vus-mr-20 vus-mb-2
<div class="vus-ml-1"></div>
<div class="vus-mt-2"></div>
<div class="vus-mr-100"></div>
<div class="vus-mb-200"></div>
<div class="vus-mt-10 vus-mb-5"></div>
<div class="vus-ml-20 vus-mt-10 vus-mr-50"></div>
响应式方案
响应式预设了四个响应尺寸：
| 分辨率 | ≥567px | ≥768px | ≥1024px | ≥1280px |
|---|---|---|---|---|
| margin | vus-ma-xs-* | vus-ma-sm-* | vus-ma-md-* | vus-ma-lg-* |
| margin-left | vus-ml-xs-* | vus-ml-sm-* | vus-ml-md-* | vus-ml-lg-* |
| margin-top | vus-mt-xs-* | vus-mt-sm-* | vus-mt-md-* | vus-mt-lg-* |
| margin-right | vus-mr-xs-* | vus-mr-sm-* | vus-mr-md-* | vus-mr-lg-* |
| margin-bottom | vus-mb-xs-* | vus-mb-sm-* | vus-mb-md-* | vus-mb-lg-* |
<div class="vus-ma-1 vus-ma-xs-2 vus-ma-sm-3 vus-ma-md-4 vus-ma-lg-5"></div>
<div class="vus-mt-1 vus-mt-xs-2 vus-mt-sm-3 vus-mt-md-4 vus-mt-lg-5"></div>
<div class="vus-mr-1 vus-mr-xs-2 vus-mr-sm-3 vus-mr-md-4 vus-mr-lg-5"></div>