feat: 样式定义

src/static/scss/margin.scss

@@ -1,8 +1,17 @@
-// 外边距-bottom
+// 外边距
 .ml-auto {
   margin-left: auto;
 }
 
+.mr-auto {
+  margin-right: auto;
+}
+
+// 2px
+.m-2 {
+  margin: 2px;
+}
+
 .mt-2 {
   margin-top: 2px;
 }
@@ -11,9 +20,35 @@
   margin-bottom: 2px;
 }
 
+.ml-2 {
+  margin-left: 2px;
+}
+
+.mr-2 {
+  margin-right: 2px;
+}
+
+.mx-2 {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.my-2 {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+// 4px
 .m-4 {
   margin: 4px;
 }
+.mt-4 {
+  margin-top: 4px;
+}
+
+.mb-4 {
+  margin-bottom: 4px;
+}
 
 .ml-4 {
   margin-left: 4px;
@@ -23,14 +58,20 @@
   margin-right: 4px;
 }
 
-.mt-4 {
-  margin-top: 4px;
+.mx-4 {
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
-.mb-4 {
+.my-4 {
+  margin-top: 4px;
   margin-bottom: 4px;
 }
 
+// 6px
+.m-6 {
+  margin: 6px;
+}
 .mt-6 {
   margin-top: 6px;
 }
@@ -47,6 +88,17 @@
   margin-right: 6px;
 }
 
+.mx-6 {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.my-6 {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+// 8px
 .m-8 {
   margin: 8px;
 }
@@ -55,6 +107,10 @@
   margin-top: 8px;
 }
 
+.mb-8 {
+  margin-bottom: 8px;
+}
+
 .ml-8 {
   margin-left: 8px;
 }
@@ -63,10 +119,21 @@
   margin-right: 8px;
 }
 
-.mb-8 {
+.mx-8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.my-8 {
+  margin-top: 8px;
   margin-bottom: 8px;
 }
 
+// 10px
+.m-10 {
+  margin: 10px;
+}
+
 .mt-10 {
   margin-top: 10px;
 }
@@ -79,6 +146,21 @@
   margin-left: 10px;
 }
 
+.mr-10 {
+  margin-right: 10px;
+}
+
+.mx-10 {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.my-10 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+// 12px
 .m-12 {
   margin: 12px;
 }
@@ -99,6 +181,52 @@
   margin-right: 12px;
 }
 
+.mx-12 {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.my-12 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+// 14px
+.m-14 {
+  margin: 14px;
+}
+
+.mt-14 {
+  margin-top: 14px;
+}
+
+.mb-14 {
+  margin-bottom: 14px;
+}
+
+.ml-14 {
+  margin-left: 14px;
+}
+
+.mr-14 {
+  margin-right: 14px;
+}
+
+.mx-14 {
+  margin-left: 14px;
+  margin-right: 14px;
+}
+
+.my-14 {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+
+// 16px
+.m-16 {
+  margin: 16px;
+}
+
 .mt-16 {
   margin-top: 16px;
 }
@@ -115,6 +243,60 @@
   margin-right: 16px;
 }
 
+.mx-16 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.my-16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+// 18px
+.m-18 {
+  margin: 18px;
+}
+
+.mt-18 {
+  margin-top: 18px;
+}
+
+.mb-18 {
+  margin-bottom: 18px;
+}
+
+.ml-18 {
+  margin-left: 18px;
+}
+
+.mr-18 {
+  margin-right: 18px;
+}
+
+.mx-18 {
+  margin-left: 18px;
+  margin-right: 18px;
+}
+
+.my-18 {
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+
+// 20px
+.m-20 {
+  margin: 20px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
 .ml-20 {
   margin-left: 20px;
 }
@@ -123,10 +305,48 @@
   margin-right: 20px;
 }
 
+.mx-20 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.my-20 {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+// 24px
+.m-24 {
+  margin: 24px;
+}
+
+.mt-24 {
+  margin-top: 24px;
+}
+
+.mb-24 {
+  margin-bottom: 24px;
+}
+
 .ml-24 {
   margin-left: 24px;
 }
 
+.mr-24 {
+  margin-right: 24px;
+}
+
+.mx-24 {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.my-24 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+// 其他
 .ml-30 {
   margin-left: 30px;
 }