docs: improve component demo style (#38643)

* chore: examine badge

* chore: examine button

* chore: examine alert

* test: update snapshot

components/alert/demo/action.md

@@ -5,9 +5,3 @@
 ## en-US
 
 Custom action.
-
-<style>
-.code-box-demo .ant-alert {
-  margin-bottom: 16px;
-}
-</style>

components/alert/demo/basic.md

@@ -5,9 +5,3 @@
 ## en-US
 
 The simplest usage for short messages.
-
-<style>
-.code-box-demo .ant-alert {
-  margin-bottom: 16px;
-}
-</style>

components/alert/demo/style.md

@@ -5,9 +5,3 @@
 ## en-US
 
 There are 4 types of Alert: `success`, `info`, `warning`, `error`.
-
-<style>
-[data-theme="compact"] .code-box-demo .ant-alert {
-  margin-bottom: 8px;
-}
-</style>

components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1728,312 +1728,354 @@ exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1
 `;
 
 exports[`renders ./components/badge/demo/ribbbon.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
   <div
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </div>
-    <div
+  </div>
-      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
+</div>
-    >
-      <span
-        class="ant-ribbon-text"
-      >
-        Hippies
-      </span>
-      <div
-        class="ant-ribbon-corner"
-      />
-    </div>
-  </div>,
-]
 `;
 
 exports[`renders ./components/badge/demo/ribbon-debug.tsx extend context correctly 1`] = `

components/badge/__tests__/__snapshots__/demo.test.ts.snap

@@ -1728,312 +1728,354 @@ exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/ribbbon.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
   <div
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </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
-    class="ant-ribbon-wrapper"
+    class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-small"
+      class="ant-ribbon-wrapper"
     >
       <div
-        class="ant-card-head"
+        class="ant-card ant-card-bordered ant-card-small"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head"
         >
           <div
-            class="ant-card-head-title"
+            class="ant-card-head-wrapper"
           >
-            Pushes open the window
+            <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-card-body"
+        class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
       >
-        and raises the spyglass.
+        <span
+          class="ant-ribbon-text"
+        >
+          Hippies
+        </span>
+        <div
+          class="ant-ribbon-corner"
+        />
       </div>
     </div>
-    <div
+  </div>
-      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
+</div>
-    >
-      <span
-        class="ant-ribbon-text"
-      >
-        Hippies
-      </span>
-      <div
-        class="ant-ribbon-corner"
-      />
-    </div>
-  </div>,
-]
 `;
 
 exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `

components/badge/demo/basic.md

@@ -5,13 +5,3 @@
 ## en-US
 
 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
-
-<style>
-.ant-badge:not(.ant-badge-not-a-wrapper) {
-  margin-right: 20px;
-}
-.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
-  margin-right: 0;
-  margin-left: 20px;
-}
-</style>

components/badge/demo/colorful-with-count-debug.md

@@ -5,9 +5,3 @@
 ## en-US
 
 support `count` when use colorful badge
-
-```css
-.ant-tag {
-  margin-bottom: 8px;
-}
-```

components/badge/demo/ribbbon.md

@@ -5,9 +5,3 @@
 ## en-US
 
 Use ribbon badge.
-
-```css
-#components-badge-demo-ribbbon .ant-card {
-  margin-bottom: 16px;
-}
-```

components/badge/demo/ribbbon.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Badge, Card } from 'antd';
+import { Badge, Card, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
     <Badge.Ribbon text="Hippies">
       <Card title="Pushes open the window" size="small">
         and raises the spyglass.
@@ -43,7 +43,7 @@ const App: React.FC = () => (
         and raises the spyglass.
       </Card>
     </Badge.Ribbon>
-  </>
+  </Space>
 );
 
 export default App;

components/button/index.zh-CN.md

@@ -83,7 +83,7 @@ group:
 
 <style>
 .site-button-ghost-wrapper {
-  padding: 8px;
+  padding: 16px;
   background: rgb(190, 200, 200);
 }