diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 12f9fe8a3a..9b68323533 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -894,14 +894,46 @@ exports[`renders ./components/space/demo/split.md extend context correctly 1`] =
 exports[`renders ./components/space/demo/vertical.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
+  style="display:flex"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      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"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -932,8 +964,7 @@ exports[`renders ./components/space/demo/vertical.md extend context correctly 1`
     class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap
index aef6fb490b..9634bca1a5 100644
--- a/components/space/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.js.snap
@@ -645,14 +645,46 @@ exports[`renders ./components/space/demo/split.md correctly 1`] = `
 exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
+  style="display:flex"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      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"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -683,8 +715,7 @@ exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
diff --git a/components/space/demo/vertical.md b/components/space/demo/vertical.md
index 36509ad548..22edfdab48 100644
--- a/components/space/demo/vertical.md
+++ b/components/space/demo/vertical.md
@@ -9,25 +9,25 @@ title:
 
 相邻组件垂直间距。
 
-可以设置 `width: 100%` 独占一行。
-
 ## en-US
 
 Crowded components vertical spacing.
 
-Can set `width: 100%` to fill a row.
-
 ```jsx
 import { Space, Card } from 'antd';
 
 function SpaceVertical() {
   return (
-    <Space direction="vertical">
-      <Card title="Card" style={{ width: 300 }}>
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+      <Card title="Card" size="small">
         <p>Card content</p>
         <p>Card content</p>
       </Card>
-      <Card title="Card" style={{ width: 300 }}>
+      <Card title="Card" size="small">
+        <p>Card content</p>
+        <p>Card content</p>
+      </Card>
+      <Card title="Card" size="small">
         <p>Card content</p>
         <p>Card content</p>
       </Card>