填充

设置内边距离(padding)和外边距离(margin)。

外边距离

  • .vus-(mt/mr/mb/ml)-(0~30):依次为(上右下左)边距0-30px
  • .vus-(mt/mr/mb/ml)-(35/40/45/50/55/60/65/70/75/80/85/90/95/100):依次为(上右下左)边距35-100px(注:35-100为每隔5个数为一个样式。如:vus-mt-35、vus-mt-40...vus-mb-70、vus-mb-75...以此类推)
vus-mt-*(顶部)
vus-mt-1
vus-mt-2
vus-mt-3
vus-mt-4
vus-mt-5
vus-mt-9
vus-mt-16
vus-mt-29
vus-mt-30
vus-mt-35
vus-mt-50
vus-mt-55
vus-mb-*(底部)
vus-mb-3
vus-mb-12
vus-mb-7
vus-mb-19
vus-mb-75
vus-mb-65
vus-mb-40
vus-mb-95
vus-mb-80
vus-mb-26
vus-mb-50
vus-mb-55
vus-ml-*(左部)
vus-ml-10
vus-ml-15
vus-ml-29
vus-ml-40
vus-ml-100
vus-ml-23
vus-mr-*(右部)
vus-mr-18
vus-mr-11
vus-mr-70
vus-mr-95
vus-mr-27
vus-mr-60
<!-- vus-mt-*(顶部) -->
<div class="vus-mt-1">vus-mt-1</div>
<div class="vus-mt-45">vus-mt-45</div>
<div class="vus-mt-80">vus-mt-80</div>

<!-- vus-mr-*(右部) -->
<div class="vus-mr-19">vus-mr-19</div>
<div class="vus-mr-29">vus-mr-29</div>
<div class="vus-mr-100">vus-mr-100</div>

<!-- vus-mb-*(底部) -->
<div class="vus-mb-35">vus-mb-35</div>
<div class="vus-mb-40">vus-mb-40</div>
<div class="vus-mb-45">vus-mb-45</div>

<!-- vus-ml-*(左部) -->
<div class="vus-ml-25">vus-ml-25</div>
<div class="vus-ml-26">vus-ml-26</div>
<div class="vus-ml-27">vus-ml-27</div>

内边距离

  • .vus-(pt/pr/pb/pl)-(0~30):依次为(上右下左)边距0-30px
  • .vus-(pt/pr/pb/pl)-(35/40/45/50/55/60/65/70/75/80/85/90/95/100):依次为(上右下左)边距35-100px(注:35-100为每隔5个数为一个样式。如:vus-pr-50、vus-pr-55...vus-pl-95、vus-pl-100...以此类推)
vus-pt-*(顶部)
vus-pt-10
vus-pt-20
vus-pt-5
vus-pt-40
vus-pt-30
vus-pt-35
vus-pb-*(底部)
vus-pb-5
vus-pb-15
vus-pb-28
vus-pb-21
vus-pb-35
vus-pb-25
vus-pl-*(左部)
vus-pl-7
vus-pl-17
vus-pl-27
vus-pl-26
vus-pl-25
vus-pl-24
vus-pr-*(右部)
vus-pr-9
vus-pr-10
vus-pr-11
vus-pr-12
vus-pr-13
vus-pr-14
<!-- vus-pt-*(顶部) -->
<div class="vus-pt-1">vus-pt-1</div>
<div class="vus-pt-2">vus-pt-2</div>
<div class="vus-pt-3">vus-pt-3</div>

<!-- vus-pr-*(右部) -->
<div class="vus-pr-17">vus-pr-17</div>
<div class="vus-pr-18">vus-pr-18</div>
<div class="vus-pr-19">vus-pr-19</div>

<!-- vus-pb-*(底部) -->
<div class="vus-pb-65">vus-pb-65</div>
<div class="vus-pb-70">vus-pb-70</div>
<div class="vus-pb-75">vus-pb-75</div>

<!-- vus-pl-*(左部) -->
<div class="vus-pl-25">vus-pl-25</div>
<div class="vus-pl-26">vus-pl-26</div>
<div class="vus-pl-27">vus-pl-27</div>

响应式填充

预设了四个响应尺寸:

分辨率≥576px≥768px≥1024px≥1280px
margin.vus-(mt/mr/mb/ml)-xs-*.vus-(mt/mr/mb/ml)-sm-*.vus-(mt/mr/mb/ml)-md-*.vus-(mt/mr/mb/ml)-lg-*
padding.vus-(pt/pr/pb/pl)-xs-*.vus-(pt/pr/pb/pl)-sm-*.vus-(pt/pr/pb/pl)-md-*.vus-(pt/pr/pb/pl)-lg-*
<!-- margin -->
<div class="vus-mt-xs-1"></div>
<div class="vus-mr-sm-45"></div>
<div class="vus-mb-md-80"></div>
<div class="vus-ml-lg-90"></div>

<!-- padding -->
<div class="vus-pt-xs-1"></div>
<div class="vus-pr-sm-45"></div>
<div class="vus-pb-md-80"></div>
<div class="vus-pl-lg-90"></div>