diff --git a/components/badge/demo/ribbon.vue b/components/badge/demo/ribbon.vue
index 6bd74794a..4411edc3b 100644
--- a/components/badge/demo/ribbon.vue
+++ b/components/badge/demo/ribbon.vue
@@ -16,28 +16,30 @@ Use ribbon badge.
 </docs>
 
 <template>
-  <a-badge-ribbon text="Hippies">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="pink">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="red">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="cyan">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="green">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="purple">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="volcano">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="magenta">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
+  <a-space direction="vertical" style="width: 100%">
+    <a-badge-ribbon text="Hippies">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="pink">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="red">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="cyan">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="green">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="purple">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="volcano">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="magenta">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+  </a-space>
 </template>
diff --git a/components/badge/demo/status.vue b/components/badge/demo/status.vue
index 74b6755bf..78be661af 100644
--- a/components/badge/demo/status.vue
+++ b/components/badge/demo/status.vue
@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 4
-title: 
+title:
   zh-CN: 状态点
   en-US: Status
 ---
@@ -22,13 +22,12 @@ Standalone badge with status.
   <a-badge status="processing" />
   <a-badge status="warning" />
   <br />
-  <a-badge status="success" text="Success" />
-  <br />
-  <a-badge status="error" text="Error" />
-  <br />
-  <a-badge status="default" text="Default" />
-  <br />
-  <a-badge status="processing" text="Processing" />
-  <br />
-  <a-badge status="warning" text="warning" />
+
+  <a-space direction="vertical">
+    <a-badge status="success" text="Success" />
+    <a-badge status="error" text="Error" />
+    <a-badge status="default" text="Default" />
+    <a-badge status="processing" text="Processing" />
+    <a-badge status="warning" text="warning" />
+  </a-space>
 </template>
diff --git a/components/config-provider/demo/direction.vue b/components/config-provider/demo/direction.vue
index 3d5280930..23f539874 100644
--- a/components/config-provider/demo/direction.vue
+++ b/components/config-provider/demo/direction.vue
@@ -24,7 +24,7 @@ Components which support rtl direction are listed here, you can toggle the direc
   </a-radio-group>
   <a-divider />
   <a-config-provider :direction="state.direction">
-    <div class="direction-components">
+    <a-space direction="vertical" class="direction-components">
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Cascader example</a-divider>
@@ -48,20 +48,17 @@ Components which support rtl direction are listed here, you can toggle the direc
           </a-cascader>
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="12">
           <a-divider orientation="left">Switch example</a-divider>
-          &nbsp;&nbsp;
-          <a-switch default-checked />
-          &nbsp;&nbsp;
-          <a-switch loading default-checked />
-          &nbsp;&nbsp;
-          <a-switch size="small" loading />
+          <a-space>
+            <a-switch default-checked />
+            <a-switch loading default-checked />
+            <a-switch size="small" loading />
+          </a-space>
         </a-col>
         <a-col :span="12">
           <a-divider orientation="left">Radio Group example</a-divider>
-
           <a-radio-group default-value="c" button-style="solid">
             <a-radio-button value="a">تهران</a-radio-button>
             <a-radio-button value="b" disabled>اصفهان</a-radio-button>
@@ -70,7 +67,6 @@ Components which support rtl direction are listed here, you can toggle the direc
           </a-radio-group>
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="12">
           <a-divider orientation="left">Button example</a-divider>
@@ -124,209 +120,199 @@ Components which support rtl direction are listed here, you can toggle the direc
           </a-tree>
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Input (Input Group) example</a-divider>
-          <a-input-group size="large">
-            <a-row :gutter="8">
-              <a-col :span="5">
-                <a-input default-value="0571" />
+          <a-space direction="vertical" style="width: 100%">
+            <a-input-group size="large">
+              <a-row :gutter="8">
+                <a-col :span="5">
+                  <a-input default-value="0571" />
+                </a-col>
+                <a-col :span="8">
+                  <a-input default-value="26888888" />
+                </a-col>
+              </a-row>
+            </a-input-group>
+            <a-input-group compact>
+              <a-input style="width: 20%" default-value="0571" />
+              <a-input style="width: 30%" default-value="26888888" />
+            </a-input-group>
+            <a-input-group compact>
+              <a-select default-value="Option1">
+                <a-select-option value="Option1">Option1</a-select-option>
+                <a-select-option value="Option2">Option2</a-select-option>
+              </a-select>
+              <a-input style="width: 50%" default-value="input content" />
+              <a-inputNumber />
+            </a-input-group>
+            <a-input-search placeholder="input search text" enter-button="Search" size="large" />
+            <div style="margin-bottom: 16px">
+              <a-input default-value="mysite">
+                <template #selectBefore>
+                  <a-select default-value="Http://" style="width: 90px">
+                    <a-select-option value="Http://">Http://</a-select-option>
+                    <a-select-option value="Https://">Https://</a-select-option>
+                  </a-select>
+                </template>
+                <template #selectAfter>
+                  <a-select default-value=".com" style="width: 80px">
+                    <a-select-option value=".com">.com</a-select-option>
+                    <a-select-option value=".jp">.jp</a-select-option>
+                    <a-select-option value=".cn">.cn</a-select-option>
+                    <a-select-option value=".org">.org</a-select-option>
+                  </a-select>
+                </template>
+              </a-input>
+            </div>
+            <a-row>
+              <a-col :span="12">
+                <a-divider orientation="left">Select example</a-divider>
+                <a-space wrap>
+                  <a-select mode="multiple" default-value="مورچه" style="width: 120px">
+                    <a-select-option value="jack">Jack</a-select-option>
+                    <a-select-option value="مورچه">مورچه</a-select-option>
+                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
+                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
+                  </a-select>
+                  <a-select default-value="مورچه" style="width: 120px" disabled>
+                    <a-select-option value="مورچه">مورچه</a-select-option>
+                  </a-select>
+                  <a-select default-value="مورچه" style="width: 120px" loading>
+                    <a-select-option value="مورچه">مورچه</a-select-option>
+                  </a-select>
+                  <a-select
+                    show-search
+                    style="width: 200px"
+                    placeholder="Select a person"
+                    option-filter-prop="children"
+                    :filter-option="
+                      (input, option) =>
+                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    "
+                  >
+                    <a-select-option value="jack">Jack</a-select-option>
+                    <a-select-option value="سعید">سعید</a-select-option>
+                    <a-select-option value="tom">Tom</a-select-option>
+                  </a-select>
+                </a-space>
               </a-col>
-              <a-col :span="8">
-                <a-input default-value="26888888" />
+              <a-col :span="12">
+                <a-divider orientation="left">TreeSelect example</a-divider>
+                <div>
+                  <a-tree-select
+                    show-search
+                    style="width: 100%"
+                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                    placeholder="Please select"
+                    allow-clear
+                    tree-default-expand-all
+                    :tree-data="treeSelectData"
+                  ></a-tree-select>
+                </div>
               </a-col>
             </a-row>
-          </a-input-group>
-          <br />
-          <a-input-group compact>
-            <a-input style="width: 20%" default-value="0571" />
-            <a-input style="width: 30%" default-value="26888888" />
-          </a-input-group>
-          <br />
-          <a-input-group compact>
-            <a-select default-value="Option1">
-              <a-select-option value="Option1">Option1</a-select-option>
-              <a-select-option value="Option2">Option2</a-select-option>
-            </a-select>
-            <a-input style="width: 50%" default-value="input content" />
-            <a-inputNumber />
-          </a-input-group>
-          <br />
-          <a-input-search placeholder="input search text" enter-button="Search" size="large" />
-          <br />
-          <br />
-          <div style="margin-bottom: 16px">
-            <a-input default-value="mysite">
-              <template #selectBefore>
-                <a-select default-value="Http://" style="width: 90px">
-                  <a-select-option value="Http://">Http://</a-select-option>
-                  <a-select-option value="Https://">Https://</a-select-option>
-                </a-select>
-              </template>
-              <template #selectAfter>
-                <a-select default-value=".com" style="width: 80px">
-                  <a-select-option value=".com">.com</a-select-option>
-                  <a-select-option value=".jp">.jp</a-select-option>
-                  <a-select-option value=".cn">.cn</a-select-option>
-                  <a-select-option value=".org">.org</a-select-option>
-                </a-select>
-              </template>
-            </a-input>
-          </div>
-          <br />
-          <a-row>
-            <a-col :span="12">
-              <a-divider orientation="left">Select example</a-divider>
-              <a-select mode="multiple" default-value="مورچه" style="width: 120px">
-                <a-select-option value="jack">Jack</a-select-option>
-                <a-select-option value="مورچه">مورچه</a-select-option>
-                <a-select-option value="disabled" disabled>Disabled</a-select-option>
-                <a-select-option value="Yiminghe">yiminghe</a-select-option>
-              </a-select>
-              <a-select default-value="مورچه" style="width: 120px" disabled>
-                <a-select-option value="مورچه">مورچه</a-select-option>
-              </a-select>
-              <a-select default-value="مورچه" style="width: 120px" loading>
-                <a-select-option value="مورچه">مورچه</a-select-option>
-              </a-select>
-              <a-select
-                show-search
-                style="width: 200px"
-                placeholder="Select a person"
-                option-filter-prop="children"
-                :filter-option="
-                  (input, option) =>
-                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                "
-              >
-                <a-select-option value="jack">Jack</a-select-option>
-                <a-select-option value="سعید">سعید</a-select-option>
-                <a-select-option value="tom">Tom</a-select-option>
-              </a-select>
-            </a-col>
-            <a-col :span="12">
-              <a-divider orientation="left">TreeSelect example</a-divider>
-              <div>
-                <a-tree-select
-                  show-search
-                  style="width: 100%"
-                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-                  placeholder="Please select"
-                  allow-clear
-                  tree-default-expand-all
-                  :tree-data="treeSelectData"
-                ></a-tree-select>
-              </div>
-            </a-col>
-          </a-row>
-          <br />
-          <a-row>
-            <a-col :span="24">
-              <a-divider orientation="left">Modal example</a-divider>
-              <div>
-                <a-button type="primary" @click="showModal">Open Modal</a-button>
-                <a-modal v-model:open="state.modalVisible" title="پنچره ساده">
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                </a-modal>
-              </div>
-            </a-col>
-          </a-row>
-          <br />
-          <a-row>
-            <a-col :span="24">
-              <a-divider orientation="left">Steps example</a-divider>
-              <div>
-                <a-steps
-                  progress-dot
-                  :current="state.currentStep"
-                  :items="[
-                    {
-                      title: 'Finished',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'In Progress',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'Waiting',
-                      description: 'This is a description.',
-                    },
-                  ]"
-                ></a-steps>
-                <br />
-                <a-steps
-                  :current="state.currentStep"
-                  :items="[
-                    {
-                      title: 'Step 1',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'Step 2',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'Step 3',
-                      description: 'This is a description.',
-                    },
-                  ]"
-                  @change="onStepsChange"
-                ></a-steps>
-              </div>
-            </a-col>
-          </a-row>
-          <br />
-          <a-row>
-            <a-col :span="12">
-              <a-divider orientation="left">Rate example</a-divider>
-              <div>
-                <a-rate v-model:value="rateValue" />
-                <br />
-                <strong>* Note:</strong>
-                Half star not implemented in RTL direction.
-              </div>
-            </a-col>
-            <a-col :span="12">
-              <a-divider orientation="left">Badge example</a-divider>
-              <div>
+            <a-row>
+              <a-col :span="24">
+                <a-divider orientation="left">Modal example</a-divider>
                 <div>
-                  <a-badge :count="state.badgeCount">
-                    <a href="#" class="head-example" />
-                  </a-badge>
-                  <a-button-group>
-                    <a-button @click="declineBadge">
-                      <MinusOutlined />
-                    </a-button>
-                    <a-button @click="increaseBadge">
-                      <PlusOutlined />
-                    </a-button>
-                  </a-button-group>
+                  <a-button type="primary" @click="showModal">Open Modal</a-button>
+                  <a-modal v-model:open="state.modalVisible" title="پنچره ساده">
+                    <p>نگاشته‌های خود را اینجا قراردهید</p>
+                    <p>نگاشته‌های خود را اینجا قراردهید</p>
+                    <p>نگاشته‌های خود را اینجا قراردهید</p>
+                  </a-modal>
                 </div>
-                <div style="margin-top: 10px">
-                  <a-badge :dot="state.showBadge">
-                    <a href="#" class="head-example" />
-                  </a-badge>
-                  <a-switch :checked="state.showBadge" @change="onChangeBadge" />
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="24">
+                <a-divider orientation="left">Steps example</a-divider>
+                <div>
+                  <a-steps
+                    progress-dot
+                    :current="state.currentStep"
+                    :items="[
+                      {
+                        title: 'Finished',
+                        description: 'This is a description.',
+                      },
+                      {
+                        title: 'In Progress',
+                        description: 'This is a description.',
+                      },
+                      {
+                        title: 'Waiting',
+                        description: 'This is a description.',
+                      },
+                    ]"
+                  ></a-steps>
+                  <br />
+                  <a-steps
+                    :current="state.currentStep"
+                    :items="[
+                      {
+                        title: 'Step 1',
+                        description: 'This is a description.',
+                      },
+                      {
+                        title: 'Step 2',
+                        description: 'This is a description.',
+                      },
+                      {
+                        title: 'Step 3',
+                        description: 'This is a description.',
+                      },
+                    ]"
+                    @change="onStepsChange"
+                  ></a-steps>
+                </div>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">
+                <a-divider orientation="left">Rate example</a-divider>
+                <div>
+                  <a-rate v-model:value="rateValue" />
+                  <br />
+                  <strong>* Note:</strong>
+                  Half star not implemented in RTL direction.
                 </div>
-              </div>
-            </a-col>
-          </a-row>
+              </a-col>
+              <a-col :span="12">
+                <a-divider orientation="left">Badge example</a-divider>
+                <div>
+                  <div>
+                    <a-badge :count="state.badgeCount">
+                      <a href="#" class="head-example" />
+                    </a-badge>
+                    <a-button-group>
+                      <a-button @click="declineBadge">
+                        <MinusOutlined />
+                      </a-button>
+                      <a-button @click="increaseBadge">
+                        <PlusOutlined />
+                      </a-button>
+                    </a-button-group>
+                  </div>
+                  <div style="margin-top: 10px">
+                    <a-badge :dot="state.showBadge">
+                      <a href="#" class="head-example" />
+                    </a-badge>
+                    <a-switch :checked="state.showBadge" @change="onChangeBadge" />
+                  </div>
+                </div>
+              </a-col>
+            </a-row>
+          </a-space>
         </a-col>
       </a-row>
-
-      <br />
-      <br />
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Pagination example</a-divider>
           <a-pagination show-size-changer :default-current="3" :total="500" />
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Grid System example</a-divider>
@@ -355,7 +341,7 @@ Components which support rtl direction are listed here, you can toggle the direc
           </div>
         </a-col>
       </a-row>
-    </div>
+    </a-space>
   </a-config-provider>
 </template>
 <script lang="ts" setup>
@@ -538,6 +524,7 @@ const rateValue = ref(2);
 </script>
 <style lang="less" scoped>
 .direction-components {
+  width: 100%;
   .button-demo .ant-btn,
   .button-demo .ant-btn-group {
     margin-right: 8px;
diff --git a/components/input/demo/group.vue b/components/input/demo/group.vue
index 61c279024..f07bfca49 100644
--- a/components/input/demo/group.vue
+++ b/components/input/demo/group.vue
@@ -18,7 +18,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
 
 </docs>
 <template>
-  <div class="site-input-group-wrapper">
+  <a-space class="site-input-group-wrapper" direction="vertical" size="middle">
     <a-input-group size="large">
       <a-row :gutter="8">
         <a-col :span="5">
@@ -29,12 +29,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         </a-col>
       </a-row>
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value1" style="width: 20%" />
       <a-input v-model:value="value2" style="width: 30%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value3">
         <a-select-option value="Zhejiang">Zhejiang</a-select-option>
@@ -42,7 +40,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
       </a-select>
       <a-input v-model:value="value4" style="width: 50%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value5">
         <a-select-option value="Option1">Option1</a-select-option>
@@ -50,12 +47,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
       </a-select>
       <a-input v-model:value="value6" style="width: 50%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value7" style="width: 50%" />
       <a-date-picker v-model:value="value8" style="width: 50%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value9">
         <a-select-option value="Option1-1">Option1-1</a-select-option>
@@ -66,7 +61,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         <a-select-option value="Option2-2">Option2-2</a-select-option>
       </a-select>
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value11">
         <a-select-option value="1">Between</a-select-option>
@@ -91,7 +85,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         placeholder="Maximum"
       />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value15">
         <a-select-option value="Sign Up">Sign Up</a-select-option>
@@ -104,7 +97,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         placeholder="Email"
       />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value17" style="width: 30%">
         <a-select-option value="Home">Home</a-select-option>
@@ -117,12 +109,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         placeholder="Select Address"
       />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value19" style="width: calc(100% - 200px)" />
       <a-button type="primary">Submit</a-button>
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value20" style="width: calc(100% - 200px)" />
       <a-tooltip title="copy git url">
@@ -131,7 +121,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         </a-button>
       </a-tooltip>
     </a-input-group>
-  </div>
+  </a-space>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
diff --git a/components/input/demo/presuffix.vue b/components/input/demo/presuffix.vue
index a8d6e173c..55b9b57dc 100644
--- a/components/input/demo/presuffix.vue
+++ b/components/input/demo/presuffix.vue
@@ -19,7 +19,7 @@ Add prefix or suffix icons inside input.
   <div class="components-input-demo-presuffix">
     <a-input v-model:value="userName" placeholder="Basic usage">
       <template #prefix>
-        <user-outlined type="user" />
+        <user-outlined />
       </template>
       <template #suffix>
         <a-tooltip title="Extra information">
diff --git a/components/progress/demo/steps.vue b/components/progress/demo/steps.vue
index fe3ce602e..5f92fd58a 100644
--- a/components/progress/demo/steps.vue
+++ b/components/progress/demo/steps.vue
@@ -17,11 +17,10 @@ A progress bar with steps.
 </docs>
 
 <template>
-  <a-progress :percent="50" :steps="3" />
-  <br />
-  <a-progress :percent="30" :steps="5" />
-  <br />
-  <a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" />
-  <br />
-  <a-progress :percent="60" :steps="5" :stroke-color="['#52c41a', '#52c41a', '#f5222d']" />
+  <a-space direction="vertical" style="width: 100%">
+    <a-progress :percent="50" :steps="3" />
+    <a-progress :percent="30" :steps="5" />
+    <a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" />
+    <a-progress :percent="60" :steps="5" :stroke-color="['#52c41a', '#52c41a', '#f5222d']" />
+  </a-space>
 </template>
diff --git a/components/space/demo/compact.vue b/components/space/demo/compact.vue
index dd6b41ef6..013eeb532 100644
--- a/components/space/demo/compact.vue
+++ b/components/space/demo/compact.vue
@@ -17,22 +17,19 @@ Compact Mode for form component.
 </docs>
 
 <template>
-  <div class="site-space-compact-wrapper">
+  <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
     <a-space-compact block>
       <a-input :style="{ width: '20%' }" default-value="0571" />
       <a-input :style="{ width: '30%' }" default-value="26888888" />
     </a-space-compact>
-    <br />
     <a-space-compact block size="small">
       <a-input :style="{ width: 'calc(100% - 200px)' }" default-value="https://ant.design" />
       <a-button type="primary">Submit</a-button>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input :style="{ width: 'calc(100% - 200px)' }" default-value="https://ant.design" />
       <a-button type="primary">Submit</a-button>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input
         :style="{ width: 'calc(100% - 200px)' }"
@@ -44,7 +41,6 @@ Compact Mode for form component.
         </a-button>
       </a-tooltip>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Zhejiang" allow-clear>
         <a-select-option value="Zhejiang">Zhejiang</a-select-option>
@@ -52,7 +48,6 @@ Compact Mode for form component.
       </a-select>
       <a-input :style="{ width: '50%' }" default-value="Xihu District, Hangzhou" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select allow-clear mode="multiple" default-value="Zhejianggggg" :style="{ width: '50%' }">
         <a-select-option value="Zhejianggggg">Zhejianggggg</a-select-option>
@@ -60,13 +55,11 @@ Compact Mode for form component.
       </a-select>
       <a-input :style="{ width: '50%' }" default-value="Xihu District, Hangzhou" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input-search :style="{ width: '30%' }" default-value="0571" />
       <a-input-search allow-clear :style="{ width: '50%' }" default-value="26888888" />
       <a-input-search :style="{ width: '20%' }" default-value="+1" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Option1">
         <a-select-option value="Option1">Option1</a-select-option>
@@ -75,23 +68,19 @@ Compact Mode for form component.
       <a-input :style="{ width: '50%' }" default-value="input content" />
       <a-input-number :default-value="12" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input :style="{ width: '50%' }" default-value="input content" />
       <a-date-picker :style="{ width: '50%' }" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-range-picker :style="{ width: '70%' }" />
       <a-input :style="{ width: '30%' }" default-value="input content" />
       <a-button type="primary">查询</a-button>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input :style="{ width: '30%' }" default-value="input content" />
       <a-range-picker :style="{ width: '70%' }" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Option1-1">
         <a-select-option value="Option1-1">Option1-1</a-select-option>
@@ -102,7 +91,6 @@ Compact Mode for form component.
         <a-select-option value="Option2-2">Option2-2</a-select-option>
       </a-select>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="1">
         <a-select-option value="1">Between</a-select-option>
@@ -129,7 +117,6 @@ Compact Mode for form component.
         placeholder="Maximum"
       />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Sign Up" :style="{ width: '30%' }">
         <a-select-option value="Sign Up">Sign Up</a-select-option>
@@ -141,7 +128,6 @@ Compact Mode for form component.
         :options="[{ value: 'text 1' }, { value: 'text 2' }]"
       />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-time-picker :style="{ width: '70%' }" />
       <a-cascader
@@ -183,7 +169,6 @@ Compact Mode for form component.
         placeholder="Select Address"
       />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-time-range-picker />
       <a-tree-select
@@ -198,8 +183,7 @@ Compact Mode for form component.
       ></a-tree-select>
       <a-button type="primary">Submit</a-button>
     </a-space-compact>
-    <br />
-  </div>
+  </a-space>
 </template>
 
 <script lang="ts" setup>