diff --git a/src/App.vue b/src/App.vue
index c0f42b34..2fdfc104 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -68,7 +68,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~uview-ui/index.scss';
 @import 'styles/common';
 
 body {
@@ -113,31 +112,6 @@ div[bottom] {
   }
 }
 
-div[flex] {
-  display: flex;
-  align-items: center;
-
-  &.spb {
-    justify-content: space-between;
-  }
-
-  &.wrap {
-    flex-wrap: wrap;
-  }
-
-  &.column {
-    flex-direction: column;
-  }
-
-  &.start {
-    align-items: flex-start;
-  }
-}
-
-div[shrink] {
-  flex-shrink: 0;
-}
-
 uni-button {
   border-radius: 4px;
 
diff --git a/src/styles/common.scss b/src/styles/common.scss
index bf1d5a31..9a1874b7 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,3 +1,42 @@
+@import '~uview-ui/index.scss';
 @import "styles/ckeditor";
 @import "styles/party";
 @import "styles/iconfont.css";
+
+/**
+常用内外边距样式
+ */
+@each $padMar, $pm in (mar:margin, pad:padding) {
+  @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+    @each $v in (8, 10, 16, 32) {
+      .#{$padMar}-#{$pos+$v} {
+        #{$pm}-#{$p}: #{$v}px
+      }
+    }
+  }
+}
+
+div[flex] {
+  display: flex;
+  align-items: center;
+
+  &.spb {
+    justify-content: space-between;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.start {
+    align-items: flex-start;
+  }
+}
+
+div[shrink] {
+  flex-shrink: 0;
+}