diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index b08e26cb09..1e3a9a8f69 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -33,19 +33,19 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
 exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
 <h4 style="margin-bottom: 16px;">Presets:</h4>
 <div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-pink"></span><span class="ant-badge-status-text">pink</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-red"></span><span class="ant-badge-status-text">red</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-yellow"></span><span class="ant-badge-status-text">yellow</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-orange"></span><span class="ant-badge-status-text">orange</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-cyan"></span><span class="ant-badge-status-text">cyan</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-green"></span><span class="ant-badge-status-text">green</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-blue"></span><span class="ant-badge-status-text">blue</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-purple"></span><span class="ant-badge-status-text">purple</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-geekblue"></span><span class="ant-badge-status-text">geekblue</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-magenta"></span><span class="ant-badge-status-text">magenta</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-volcano"></span><span class="ant-badge-status-text">volcano</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
-  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-pink"></span><span class="ant-badge-status-text">pink</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-red"></span><span class="ant-badge-status-text">red</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-yellow"></span><span class="ant-badge-status-text">yellow</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-orange"></span><span class="ant-badge-status-text">orange</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-cyan"></span><span class="ant-badge-status-text">cyan</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-green"></span><span class="ant-badge-status-text">green</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-blue"></span><span class="ant-badge-status-text">blue</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-purple"></span><span class="ant-badge-status-text">purple</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-geekblue"></span><span class="ant-badge-status-text">geekblue</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-magenta"></span><span class="ant-badge-status-text">magenta</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-volcano"></span><span class="ant-badge-status-text">volcano</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
+  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
 </div>
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div>
 <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0); color: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span>
@@ -89,141 +89,167 @@ exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+<div style="width: 100%;" class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
         <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
+        <!---->
+      </div>
+      <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
       </div>
-      <!---->
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
-  </div>
-  <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
   </div>
-</div>
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
         <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
+        <!---->
+      </div>
+      <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
       </div>
-      <!---->
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
   </div>
-  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
-  </div>
-</div>
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
         <!---->
       </div>
-      <!---->
+      <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
+      </div>
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
-  </div>
-  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
   </div>
-</div>
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
         <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
+        <!---->
+      </div>
+      <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
       </div>
-      <!---->
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
   </div>
-  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
-  </div>
-</div>
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
         <!---->
       </div>
-      <!---->
+      <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
+      </div>
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
-  </div>
-  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
   </div>
-</div>
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
         <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
+        <!---->
+      </div>
+      <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
       </div>
-      <!---->
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
   </div>
-  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
-  </div>
-</div>
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
         <!---->
       </div>
-      <!---->
+      <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
+      </div>
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
-  </div>
-  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
   </div>
-</div>
-<div class="ant-ribbon-wrapper ">
-  <div class="ant-card  ant-card-bordered ant-card-small">
-    <div class="ant-card-head">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title">Pushes open the window</div>
+  <!---->
+  <div class="ant-space-item">
+    <div class="ant-ribbon-wrapper ">
+      <div class="ant-card  ant-card-bordered ant-card-small">
+        <div class="ant-card-head">
+          <div class="ant-card-head-wrapper">
+            <div class="ant-card-head-title">Pushes open the window</div>
+            <!---->
+          </div>
+          <!---->
+        </div>
         <!---->
+        <div class="ant-card-body">and raises the spyglass.</div>
+        <!---->
+      </div>
+      <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
+        <div class="ant-ribbon-corner"></div>
       </div>
-      <!---->
     </div>
-    <!---->
-    <div class="ant-card-body">and raises the spyglass.</div>
-    <!---->
-  </div>
-  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
-    <div class="ant-ribbon-corner"></div>
   </div>
+  <!---->
 </div>
 `;
 
@@ -234,15 +260,18 @@ exports[`renders ./components/badge/demo/status.vue correctly 1`] = `
 <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"><!----></span></span>
 <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"><!----></span></span>
 <br>
-<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span>
-<br>
-<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span>
-<br>
-<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span>
-<br>
-<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span>
-<br>
-<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span>
+<div class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span></div>
+  <!---->
+  <div class="ant-space-item"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span></div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/badge/demo/title.vue correctly 1`] = `
diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
index 67ac2c8291..7589799b61 100644
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -178,7 +178,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
           backgroundColor: token.colorSuccess,
         },
         [`${componentCls}-status-processing`]: {
-          position: 'relative',
+          overflow: 'visible',
           color: token.colorPrimary,
           backgroundColor: token.colorPrimary,