diff --git a/docs/site/components/DemoList.vue b/docs/site/components/DemoList.vue
index 0ba0abf79..bb93d6b18 100644
--- a/docs/site/components/DemoList.vue
+++ b/docs/site/components/DemoList.vue
@@ -77,13 +77,13 @@ export default {
 
   .vant-title,
   .vant-desc {
-    padding-left: 15px;
+    padding-left: @padding-md;
     font-weight: normal;
     user-select: none;
   }
 
   .vant-title {
-    margin: 0 0 15px;
+    margin: 0 0 @padding-md;
 
     img,
     span {
@@ -96,7 +96,7 @@ export default {
     }
 
     span {
-      margin-left: 15px;
+      margin-left: @padding-md;
       font-weight: 500;
       font-size: 36px;
     }
diff --git a/docs/site/desktop/App.vue b/docs/site/desktop/App.vue
index bf150c046..5c49a6fef 100644
--- a/docs/site/desktop/App.vue
+++ b/docs/site/desktop/App.vue
@@ -47,38 +47,7 @@ export default {
     }
   },
 
-  mounted() {
-    this.showVersionTip();
-  },
-
   methods: {
-    showVersionTip() {
-      const tip = window.localStorage.getItem('vantVersionTip');
-
-      if (!tip && this.$vantLang === 'zh-CN') {
-        const version = document.querySelector('.van-doc-header__version');
-        version.insertAdjacentHTML('beforeend', `
-          <div class="doc-version-tip">
-            提示：你当前访问的是 Vant 2.0 版本文档，点此切换至旧版文档
-            <div style="text-align: right;">
-              <button class="doc-version-tip__button">好哒</button>
-            </div>
-          </div>
-        `);
-
-        const tip = document.querySelector('.doc-version-tip');
-        const removeTip = event => {
-          event.stopPropagation();
-          tip.parentNode.removeChild(tip);
-        };
-
-        tip.addEventListener('click', removeTip);
-        version.addEventListener('click', removeTip);
-
-        window.localStorage.setItem('vantVersionTip', 1);
-      }
-    },
-
     onChangeDemoURL(url) {
       this.simulators = [this.simulators[0], url];
     },
@@ -102,65 +71,4 @@ export default {
     margin-bottom: 20px;
   }
 }
-
-.doc-version-tip {
-  position: absolute;
-  top: 35px;
-  left: 50%;
-  z-index: 100;
-  box-sizing: border-box;
-  width: 300px;
-  margin-left: -150px;
-  padding: 15px;
-  color: #333;
-  text-align: left;
-  background-color: #fff;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px #ebedf0;
-  transform-origin: top;
-  cursor: default;
-  animation: version-tip .25s cubic-bezier(0.175, 0.885, 0.32, 1.375);
-
-  &::before {
-    position: absolute;
-    top: -4px;
-    left: 50%;
-    margin-left: -3px;
-    border: 6px solid;
-    border-color: transparent transparent white white;
-    transform: rotate(135deg);
-    content: '';
-  }
-
-  &__button {
-    width: 60px;
-    color: #fff;
-    font-size: 12px;
-    line-height: 24px;
-    background: #1889f9;
-    border: none;
-    border-radius: 15px;
-    cursor: pointer;
-
-    &:hover {
-      background: darken(#1889f9, 10%);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @keyframes version-tip {
-    from {
-      transform: scaleY(0);
-      opacity: 0;
-    }
-
-    to {
-      transform: scaleY(1);
-      opacity: 1;
-    }
-  }
-}
 </style>
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index ab2cbd7d7..94fa057c9 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -134,7 +134,7 @@ export default {
   background-color: @white;
 
   .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 
   p {
diff --git a/src/address-list/index.less b/src/address-list/index.less
index 65866949c..ebe202aec 100644
--- a/src/address-list/index.less
+++ b/src/address-list/index.less
@@ -13,7 +13,7 @@
   }
 
   &__disabled-text {
-    padding: 0 15px;
+    padding: 0 @padding-md;
     color: @address-list-disabled-text-color;
     font-size: @address-list-disabled-text-font-size;
     line-height: @address-list-disabled-text-line-height;
@@ -24,7 +24,7 @@
   padding: @address-list-item-padding;
 
   &__value {
-    padding-right: 34px;
+    padding-right: @padding-xl;
   }
 
   &__name {
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 9b7a846e9..40fe6e316 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -180,20 +180,22 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-button {
   .van-button {
     &--large {
-      margin-bottom: 15px;
+      margin-bottom: @padding-md;
     }
 
     &--small,
     &--normal:not(:last-child) {
-      margin-right: 10px;
+      margin-right: @padding-md;
     }
   }
 
   .van-doc-demo-block {
-    padding: 0 15px;
+    padding: 0 @padding-md;
   }
 
   .van-doc-demo-block__title {
@@ -201,7 +203,7 @@ export default {
   }
 
   &-row {
-    margin-bottom: 10px;
+    margin-bottom: @padding-sm;
   }
 }
 </style>
diff --git a/src/button/index.less b/src/button/index.less
index 69f528f51..771b2fb14 100644
--- a/src/button/index.less
+++ b/src/button/index.less
@@ -104,7 +104,7 @@
   &--small {
     min-width: @button-small-min-width;
     height: @button-small-height;
-    padding: 0 8px;
+    padding: 0 @padding-xs;
     font-size: @button-small-font-size;
     line-height: @button-small-line-height;
   }
diff --git a/src/card/index.less b/src/card/index.less
index 2e6eecd9e..d76ab92d2 100644
--- a/src/card/index.less
+++ b/src/card/index.less
@@ -10,7 +10,7 @@
   background-color: @card-background-color;
 
   &:not(:first-child) {
-    margin-top: 10px;
+    margin-top: @padding-xs;
   }
 
   &__header {
@@ -22,7 +22,7 @@
     flex: none;
     width: @card-thumb-size;
     height: @card-thumb-size;
-    margin-right: 10px;
+    margin-right: @padding-xs;
   }
 
   &__content {
diff --git a/src/cell/index.less b/src/cell/index.less
index e52a2db14..a99423790 100644
--- a/src/cell/index.less
+++ b/src/cell/index.less
@@ -14,7 +14,7 @@
   background-color: @cell-background-color;
 
   &:not(:last-child)::after {
-    .hairline-bottom(@cell-border-color, 15px);
+    .hairline-bottom(@cell-border-color, @padding-md);
   }
 
   &--borderless::after {
@@ -74,7 +74,7 @@
 
     &::before {
       position: absolute;
-      left: 7px;
+      left: @padding-xs;
       color: @cell-required-color;
       font-size: @cell-font-size;
       content: '*';
diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index b80f7b187..9102c73ca 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -75,16 +75,18 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-circle {
   .van-circle {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 
   .van-button {
-    margin: 15px 0 0 10px;
+    margin: @padding-md 0 0 10px;
 
     &:first-of-type {
-      margin-left: 15px;
+      margin-left: @padding-md;
     }
   }
 }
diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue
index 9b3f95223..b19975fc1 100644
--- a/src/col/demo/index.vue
+++ b/src/col/demo/index.vue
@@ -104,7 +104,7 @@ export default {
 
 .demo-col {
   .van-doc-demo-block {
-    padding: 0 15px;
+    padding: 0 @padding-md;
   }
 
   .van-doc-demo-block__title {
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index ba3be3bcd..860a45f1c 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -127,7 +127,7 @@ export default {
   background-color: @white;
 
   .van-count-down {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 
   .item {
diff --git a/src/coupon-list/index.less b/src/coupon-list/index.less
index 179a4d772..e41eff7e4 100644
--- a/src/coupon-list/index.less
+++ b/src/coupon-list/index.less
@@ -16,7 +16,7 @@
 
   &__list {
     box-sizing: border-box;
-    padding: 15px 0;
+    padding: @padding-md 0;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
@@ -33,7 +33,7 @@
     text-align: center;
 
     p {
-      margin: 15px 0;
+      margin: @padding-md 0;
       color: @coupon-list-empty-tip-color;
       font-size: @coupon-list-empty-tip-font-size;
       line-height: @coupon-list-empty-tip-line-height;
diff --git a/src/coupon/index.less b/src/coupon/index.less
index 35be4d6f8..88d7cdaaa 100644
--- a/src/coupon/index.less
+++ b/src/coupon/index.less
@@ -41,7 +41,7 @@
   &__head {
     position: relative;
     min-width: @coupon-head-width;
-    padding-right: 10px;
+    padding-right: @padding-xs;
 
     p {
       white-space: pre-wrap;
@@ -73,8 +73,8 @@
 
   &__corner {
     position: absolute;
-    top: 16px;
-    right: 15px;
+    top: @padding-md;
+    right: @padding-md;
   }
 
   &__description {
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index a638126dd..cedb1750a 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -127,7 +127,7 @@ export default {
   background-color: @white;
 
   .van-doc-demo-block > .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 
   img {
diff --git a/src/divider/README.md b/src/divider/README.md
index 4a834920b..9cc9ae9ba 100644
--- a/src/divider/README.md
+++ b/src/divider/README.md
@@ -38,7 +38,7 @@ Vue.use(Divider);
 ### Custom Style
 
 ```html
-<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
+<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
   Text
 </van-divider>
 ```
diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md
index 329694072..27f1f7401 100644
--- a/src/divider/README.zh-CN.md
+++ b/src/divider/README.zh-CN.md
@@ -48,7 +48,7 @@ Vue.use(Divider);
 可以直接通过`style`属性设置分割线的样式
 
 ```html
-<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
+<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
   文字
 </van-divider>
 ```
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index cbad748b4..fbd0a2d35 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -30,7 +30,7 @@
     </demo-block>
 
     <demo-block :title="$t('customStyle')">
-      <van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 15px' }">
+      <van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
         {{ $t('text') }}
       </van-divider>
     </demo-block>
@@ -67,11 +67,13 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-divider {
-  background-color: #fff;
+  background-color: @white;
 
   .van-doc-demo-block__title {
-    padding-top: 15px;
+    padding-top: @padding-md;
   }
 }
 </style>
diff --git a/src/divider/test/__snapshots__/demo.spec.js.snap b/src/divider/test/__snapshots__/demo.spec.js.snap
index db3ddf077..e8f11cfa7 100644
--- a/src/divider/test/__snapshots__/demo.spec.js.snap
+++ b/src/divider/test/__snapshots__/demo.spec.js.snap
@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 15px;">
+    <div class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 16px;">
       文本
     </div>
   </div>
diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
index ba27fc390..9d3fc6331 100644
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@@ -32,7 +32,7 @@
     position: relative;
     box-sizing: border-box;
     max-width: 100%;
-    padding: 0 8px;
+    padding: 0 @padding-xs;
     font-size: @dropdown-menu-title-font-size;
 
     &::after {
diff --git a/src/field/index.less b/src/field/index.less
index cc3e12ab0..6a250d4ab 100644
--- a/src/field/index.less
+++ b/src/field/index.less
@@ -66,8 +66,8 @@
 
   &__clear,
   &__right-icon {
-    margin-right: -10px;
-    padding: 0 10px;
+    margin-right: -@padding-xs;
+    padding: 0 @padding-xs;
     line-height: inherit;
   }
 
@@ -93,7 +93,7 @@
   }
 
   &__button {
-    padding-left: 10px;
+    padding-left: @padding-xs;
   }
 
   &__error-message {
diff --git a/src/grid-item/index.less b/src/grid-item/index.less
index a1d9a144d..0e087980b 100644
--- a/src/grid-item/index.less
+++ b/src/grid-item/index.less
@@ -55,6 +55,6 @@
   }
 
   &__icon + &__text {
-    margin-top: 8px;
+    margin-top: @padding-xs;
   }
 }
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index 5cf77ac27..604d01569 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -115,7 +115,7 @@ export default {
   background-color: @white;
 
   .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 
diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue
index d1ab4328d..91e69828f 100644
--- a/src/image/demo/index.vue
+++ b/src/image/demo/index.vue
@@ -140,7 +140,7 @@ export default {
   background-color: @white;
 
   .van-row {
-    padding: 0 15px;
+    padding: 0 @padding-md;
   }
 
   .van-col {
diff --git a/src/index-bar/index.less b/src/index-bar/index.less
index 7b59f7359..25e8f93cb 100644
--- a/src/index-bar/index.less
+++ b/src/index-bar/index.less
@@ -13,7 +13,7 @@
   }
 
   &__index {
-    padding: 0 3px 0 15px;
+    padding: 0 @padding-base 0 @padding-md;
     font-weight: 500;
     font-size: @index-bar-index-font-size;
     line-height: @index-bar-index-line-height;
diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue
index cbee1f8dd..42b1d88a4 100644
--- a/src/lazyload/demo/index.vue
+++ b/src/lazyload/demo/index.vue
@@ -60,19 +60,22 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-lazyload {
-  padding: 15px;
+  padding-right: @padding-md;
+  padding-left: @padding-md;
 
   img,
   div[lazy] {
     box-sizing: border-box;
     width: 100%;
     height: 250px;
-    margin: 10px 0 0;
-    padding: 15px;
+    margin-bottom: @padding-md;
+    padding: @padding-md;
     background-color: white;
     background-repeat: no-repeat;
-    background-position: 15px;
+    background-position: @padding-md;
     background-size: 315px 250px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   }
diff --git a/src/loading/index.less b/src/loading/index.less
index 56d5bc7a2..17f86f4d5 100644
--- a/src/loading/index.less
+++ b/src/loading/index.less
@@ -58,7 +58,7 @@
 
   &__text {
     display: inline-block;
-    margin-left: 10px;
+    margin-left: @padding-xs;
     color: @loading-text-color;
     font-size: @loading-text-font-size;
     vertical-align: middle;
@@ -70,7 +70,7 @@
     align-items: center;
 
     .van-loading__text {
-      margin: 10px 0 0;
+      margin: @padding-xs 0 0;
     }
   }
 }
diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less
index 37b29955c..3f9a99e35 100644
--- a/src/nav-bar/index.less
+++ b/src/nav-bar/index.less
@@ -46,17 +46,17 @@
   }
 
   &__left {
-    left: 15px;
+    left: @padding-md;
   }
 
   &__right {
-    right: 15px;
+    right: @padding-md;
   }
 
   &__text {
     display: inline-block;
-    margin: 0 -15px;
-    padding: 0 15px;
+    margin: 0 -@padding-md;
+    padding: 0 @padding-md;
     color: @nav-bar-text-color;
     vertical-align: middle;
 
diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index 97ffeb3dd..bce76c71e 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -58,7 +58,7 @@ export default {
   background-color: @white;
 
   .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index e51508b4f..0dca08a6a 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -104,9 +104,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-number-keyboard {
   .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index da2b5da52..113571c7b 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -4,7 +4,7 @@
       <van-button
         type="primary"
         :text="$t('showOverlay')"
-        style="margin-left: 15px;"
+        style="margin-left: 16px;"
         @click="show = true"
       />
 
@@ -34,41 +34,3 @@ export default {
   }
 };
 </script>
-
-<style lang="less">
-.demo-skeleton {
-  background-color: #fff;
-
-  .van-switch {
-    margin: 0 15px 10px;
-  }
-
-  .demo-preview {
-    display: flex;
-    padding: 0 15px;
-
-    .demo-content {
-      padding-top: 6px;
-
-      h3 {
-        margin: 0;
-        font-size: 18px;
-        line-height: 20px;
-      }
-
-      p {
-        margin: 13px 0 0;
-        font-size: 14px;
-        line-height: 20px;
-      }
-    }
-
-    img {
-      flex-shrink: 0;
-      width: 32px;
-      height: 32px;
-      margin-right: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/overlay/test/__snapshots__/demo.spec.js.snap b/src/overlay/test/__snapshots__/demo.spec.js.snap
index 8a23ac9af..7c4c62f72 100644
--- a/src/overlay/test/__snapshots__/demo.spec.js.snap
+++ b/src/overlay/test/__snapshots__/demo.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">显示遮罩层</span></button>
+  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">显示遮罩层</span></button>
     <div class="van-overlay" style="z-index: 1; display: none;" name="van-fade"></div>
   </div>
 </div>
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index bcc507fd3..7ff5959dc 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -62,6 +62,8 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-pagination {
   .van-pagination {
     width: 100%;
@@ -69,7 +71,7 @@ export default {
   }
 
   .van-doc-demo-block {
-    padding: 0 15px;
+    padding: 0 @padding-md;
   }
 
   .van-doc-demo-block__title {
diff --git a/src/password-input/index.less b/src/password-input/index.less
index c94b7ea0b..07742a8ed 100644
--- a/src/password-input/index.less
+++ b/src/password-input/index.less
@@ -7,7 +7,7 @@
 
   &__info,
   &__error-info {
-    margin-top: 15px;
+    margin-top: @padding-md;
     font-size: @password-input-info-font-size;
     text-align: center;
   }
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index 95c553ef8..e3dd0f379 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -152,11 +152,11 @@ export default {
 
 .demo-popup {
   .van-row {
-    margin-bottom: 15px;
+    margin-bottom: @padding-md;
   }
 
   .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index 8ee27fb5f..2dbab6ecd 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -57,7 +57,7 @@ export default {
   }
 
   p {
-    margin: 10px 0 0 15px;
+    margin: @padding-xs 0 0 @padding-md;
   }
 }
 </style>
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index b3b880ef8..2a7393013 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -90,12 +90,14 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-rate {
   padding-bottom: 20px;
   background-color: #fff;
 
   .van-rate {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/search/index.less b/src/search/index.less
index 6eb930a6d..9b91b1392 100644
--- a/src/search/index.less
+++ b/src/search/index.less
@@ -9,7 +9,7 @@
   &__content {
     display: flex;
     flex: 1;
-    padding-left: 10px;
+    padding-left: @padding-xs;
     background-color: @search-background-color;
     border-radius: 2px;
 
@@ -27,7 +27,7 @@
 
   .van-cell {
     flex: 1;
-    padding: 5px 10px 5px 0;
+    padding: 5px @padding-xs 5px 0;
     background-color: transparent;
 
     &__left-icon {
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index cb45be168..077bdf1fc 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -55,7 +55,7 @@ export default {
   background-color: @white;
 
   .van-sidebar {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index 59ef3c41b..f722e8e02 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -64,16 +64,18 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-skeleton {
-  background-color: #fff;
+  background-color: @white;
 
   .van-switch {
-    margin: 0 15px 10px;
+    margin: 0 @padding-md @padding-xs;
   }
 
   .demo-preview {
     display: flex;
-    padding: 0 15px;
+    padding: 0 @padding-md;
 
     .demo-content {
       padding-top: 6px;
@@ -95,7 +97,7 @@ export default {
       flex-shrink: 0;
       width: 32px;
       height: 32px;
-      margin-right: 15px;
+      margin-right: @padding-md;
     }
   }
 }
diff --git a/src/skeleton/index.less b/src/skeleton/index.less
index da029310f..96c46e576 100644
--- a/src/skeleton/index.less
+++ b/src/skeleton/index.less
@@ -2,11 +2,11 @@
 
 .van-skeleton {
   display: flex;
-  padding: 0 15px;
+  padding: 0 @padding-md;
 
   &__avatar {
     flex-shrink: 0;
-    margin-right: 15px;
+    margin-right: @padding-md;
     background-color: @skeleton-avatar-background-color;
 
     &--round {
@@ -19,7 +19,7 @@
   }
 
   &__avatar + &__content {
-    padding-top: 8px;
+    padding-top: @padding-xs;
   }
 
   &__row,
diff --git a/src/sku/demo/index.vue b/src/sku/demo/index.vue
index 2e1a1377d..ca3c19196 100644
--- a/src/sku/demo/index.vue
+++ b/src/sku/demo/index.vue
@@ -226,7 +226,7 @@ export default {
   background-color: @white;
 
   .sku-container {
-    padding: 0 15px;
+    padding: 0 @padding-md;
   }
 }
 </style>
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index c426e8775..e3591c936 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -118,7 +118,7 @@ export default {
   user-select: none;
 
   .van-slider {
-    margin: 0 15px 30px;
+    margin: 0 @padding-md @padding-xl;
   }
 
   .custom-button {
diff --git a/src/step/index.less b/src/step/index.less
index f5ed1eb85..94fcb1986 100644
--- a/src/step/index.less
+++ b/src/step/index.less
@@ -48,9 +48,9 @@
     .van-step__circle-container {
       position: absolute;
       top: 30px;
-      left: -8px;
+      left: -@padding-xs;
       z-index: 1;
-      padding: 0 8px;
+      padding: 0 @padding-xs;
       background-color: @white;
       transform: translateY(-50%);
     }
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 708260b16..0fdb0c88e 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -115,11 +115,3 @@ export default {
   }
 };
 </script>
-
-<style lang="less">
-.demo-stepper {
-  .van-stepper {
-    margin-left: 15px;
-  }
-}
-</style>
diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue
index 2a1df23f3..8d4dc6a9f 100644
--- a/src/steps/demo/index.vue
+++ b/src/steps/demo/index.vue
@@ -102,7 +102,7 @@ export default {
   }
 
   .van-button {
-    margin: 15px 0 0 15px;
+    margin: @padding-md 0 0 @padding-md;
   }
 
   .van-steps__message + p {
diff --git a/src/steps/index.less b/src/steps/index.less
index d5f819c9f..51d94d716 100644
--- a/src/steps/index.less
+++ b/src/steps/index.less
@@ -16,6 +16,6 @@
   }
 
   &--vertical {
-    padding: 0 0 0 35px;
+    padding: 0 0 0 @padding-xl;
   }
 }
diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue
index 06e8b0a9a..4ef5519df 100644
--- a/src/sticky/demo/index.vue
+++ b/src/sticky/demo/index.vue
@@ -66,11 +66,13 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-sticky {
   height: 200vh;
 
   .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index d5fc0ffd2..7a8106319 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -90,7 +90,7 @@ export default {
 .demo-style {
   .van-ellipsis {
     max-width: 250px;
-    margin-left: 15px;
+    margin-left: @padding-md;
     font-size: 13px;
   }
 
diff --git a/src/style/var.less b/src/style/var.less
index 4285f1e7f..56e45e413 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -18,11 +18,14 @@
 @active-color: #f2f3f5;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
-@padding-xl: 32px;
-@padding-lg: 24px;
-@padding-md: 16px;
-@padding-sm: 12px;
-@padding-xs: 8px;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
 
 // ActionSheet
 @action-sheet-max-height: 90%;
@@ -37,13 +40,13 @@
 @action-sheet-subname-font-size: 12px;
 @action-sheet-close-icon-size: 18px;
 @action-sheet-close-icon-color: @gray-dark;
-@action-sheet-close-icon-padding: 0 @padding-md;
+@action-sheet-close-icon-padding: 0 @padding-sm;
 @action-sheet-cancel-padding-top: @padding-xs;
 @action-sheet-cancel-padding-color: @background-color;
 
 // AddressEdit
 @address-edit-buttons-padding: @padding-xl @padding-md;
-@address-edit-button-margin-bottom: @padding-md;
+@address-edit-button-margin-bottom: @padding-sm;
 @address-edit-detail-finish-color: @blue;
 @address-edit-detail-fnish-font-size: 12px;
 
@@ -167,7 +170,7 @@
 
 // ContactEdit
 @contact-edit-buttons-padding: @padding-xl @padding-md;
-@contact-edit-button-margin-bottom: @padding-md;
+@contact-edit-button-margin-bottom: @padding-sm;
 @contact-edit-field-label-width: 65px;
 
 // ContactList
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index 5b2947760..8e34112ad 100644
--- a/src/submit-bar/demo/index.vue
+++ b/src/submit-bar/demo/index.vue
@@ -102,7 +102,7 @@ export default {
   }
 
   .van-checkbox {
-    margin-left: 15px;
+    margin-left: @padding-sm;
   }
 }
 </style>
diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less
index 1d08e22f8..0f94e7f89 100644
--- a/src/submit-bar/index.less
+++ b/src/submit-bar/index.less
@@ -37,7 +37,7 @@
 
   &__text {
     flex: 1;
-    padding-right: 12px;
+    padding-right: @padding-sm;
     color: @submit-bar-text-color;
     font-weight: 500;
     text-align: right;
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index de73ac5e3..7a6d9eb86 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -84,9 +84,11 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-switch {
   .van-switch {
-    margin: 0 15px;
+    margin: 0 @padding-md;
   }
 }
 </style>
diff --git a/src/tabs/index.less b/src/tabs/index.less
index bfcdc6ee1..14b10f9c1 100644
--- a/src/tabs/index.less
+++ b/src/tabs/index.less
@@ -77,7 +77,7 @@
     &--card {
       box-sizing: border-box;
       height: @tabs-card-height;
-      margin: 0 15px;
+      margin: 0 @padding-md;
       border: 1px solid @tabs-default-color;
       border-radius: 2px;
 
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 344a2c97c..9944e29de 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -138,16 +138,18 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-tag {
-  background-color: #fff;
+  background-color: @white;
 
   .van-tag + .van-tag {
-    margin-left: 10px;
+    margin-left: @padding-xs;
   }
 
   .van-tag {
     &:first-of-type {
-      margin-left: 15px;
+      margin-left: @padding-md;
     }
   }
 }
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index 9a4402b00..5a975d168 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -161,7 +161,7 @@ export default {
   background-color: @white;
 
   .van-button {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/toast/index.less b/src/toast/index.less
index 8393eafb7..4df065baf 100644
--- a/src/toast/index.less
+++ b/src/toast/index.less
@@ -64,6 +64,6 @@
   }
 
   &__text {
-    margin-top: 10px;
+    margin-top: @padding-xs;
   }
 }
diff --git a/src/tree-select/index.less b/src/tree-select/index.less
index 5c4424808..a598f9652 100644
--- a/src/tree-select/index.less
+++ b/src/tree-select/index.less
@@ -39,7 +39,7 @@
 
   &__item {
     position: relative;
-    padding-left: 15px;
+    padding-left: @padding-md;
     font-weight: bold;
     line-height: @tree-select-item-height;
 
@@ -55,7 +55,7 @@
   &__selected {
     position: absolute;
     top: 50%;
-    right: 15px;
-    margin-top: -8px;
+    right: @padding-md;
+    margin-top: -@padding-xs;
   }
 }
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index 3b4bb0b7d..1ae8a3a9a 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -87,11 +87,13 @@ export default {
 </script>
 
 <style lang="less">
+@import "../../style/var";
+
 .demo-uploader {
-  background-color: #fff;
+  background-color: @white;
 
   .van-uploader {
-    margin-left: 15px;
+    margin-left: @padding-md;
   }
 }
 </style>
diff --git a/src/uploader/index.less b/src/uploader/index.less
index 996c4f75b..263e44c1f 100644
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@@ -33,7 +33,7 @@
     box-sizing: border-box;
     width: @uploader-size;
     height: @uploader-size;
-    margin: 0 10px 10px 0;
+    margin: 0 @padding-xs @padding-xs 0;
     background-color: @uploader-upload-background-color;
     border: 1px dashed @uploader-upload-border-color;
 
@@ -43,7 +43,7 @@
     }
 
     &-text {
-      margin-top: 10px;
+      margin-top: @padding-xs;
       color: @uploader-text-color;
       font-size: @uploader-text-font-size;
     }
@@ -51,7 +51,7 @@
 
   &__preview {
     position: relative;
-    margin: 0 10px 10px 0;
+    margin: 0 @padding-xs @padding-xs 0;
 
     &-image {
       display: block;
@@ -86,7 +86,7 @@
     &-name {
       box-sizing: border-box;
       width: 100%;
-      margin-top: 5px;
+      margin-top: @padding-xs;
       padding: 0 5px;
       color: @uploader-file-name-text-color;
       font-size: @uploader-file-name-font-size;