diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
index bc365b9f12..62d97b5865 100644
--- a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1500,16 +1500,14 @@ exports[`renders components/grid/demo/sort.tsx extend context correctly 1`] = `
 exports[`renders components/grid/demo/sort.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 1`] = `
-<div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
->
-  Current break point:
+Array [
+  Current break point: ,
   <span
     class="ant-tag ant-tag-blue"
   >
     xs
-  </span>
-</div>
+  </span>,
+]
 `;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 2`] = `[]`;
diff --git a/components/grid/__tests__/__snapshots__/demo.test.ts.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
index d55d0afdb9..ea31e061cc 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
@@ -1419,9 +1419,9 @@ exports[`renders components/grid/demo/sort.tsx correctly 1`] = `
 `;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx correctly 1`] = `
-<div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
->
-  Current break point:
-</div>
+Array [
+  Current break point:,
+  <!-- -->,
+   ,
+]
 `;
diff --git a/components/grid/demo/useBreakpoint.tsx b/components/grid/demo/useBreakpoint.tsx
index 160233c51d..90baf90e24 100644
--- a/components/grid/demo/useBreakpoint.tsx
+++ b/components/grid/demo/useBreakpoint.tsx
@@ -1,21 +1,22 @@
 import React from 'react';
-import { Flex, Grid, Tag } from 'antd';
+import { Grid, Tag } from 'antd';
 
 const { useBreakpoint } = Grid;
 
 const App: React.FC = () => {
   const screens = useBreakpoint();
+
   return (
-    <Flex wrap="wrap" gap="small">
-      Current break point:
+    <>
+      Current break point:{' '}
       {Object.entries(screens)
         .filter((screen) => !!screen[1])
-        .map<React.ReactNode>((screen) => (
+        .map((screen) => (
           <Tag color="blue" key={screen[0]}>
             {screen[0]}
           </Tag>
         ))}
-    </Flex>
+    </>
   );
 };
 
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 5cce851ef8..9b3737c359 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1522,11 +1522,9 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
         <span>
           <span
             class="ant-tag ant-tag-gold"
-            style="margin-inline-end: 4px;"
+            style="margin-right: 3px;"
           >
-            <span>
-              gold
-            </span>
+            gold
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -1558,11 +1556,9 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
         <span>
           <span
             class="ant-tag ant-tag-cyan"
-            style="margin-inline-end: 4px;"
+            style="margin-right: 3px;"
           >
-            <span>
-              cyan
-            </span>
+            cyan
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -1661,13 +1657,12 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
               <div
                 aria-selected="true"
                 class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                title="gold"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  <span>
-                    gold
-                  </span>
+                  gold
                 </div>
                 <span
                   aria-hidden="true"
@@ -1699,37 +1694,34 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
+                title="lime"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  <span>
-                    lime
-                  </span>
+                  lime
                 </div>
               </div>
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
+                title="green"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  <span>
-                    green
-                  </span>
+                  green
                 </div>
               </div>
               <div
                 aria-selected="true"
                 class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                title="cyan"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  <span>
-                    cyan
-                  </span>
+                  cyan
                 </div>
                 <span
                   aria-hidden="true"
diff --git a/components/select/__tests__/__snapshots__/demo.test.tsx.snap b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
index e10136dc9b..d08fc0d1e2 100644
--- a/components/select/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
@@ -718,11 +718,9 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
         <span>
           <span
             class="ant-tag ant-tag-gold"
-            style="margin-inline-end:4px"
+            style="margin-right:3px"
           >
-            <span>
-              gold
-            </span>
+            gold
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -754,11 +752,9 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
         <span>
           <span
             class="ant-tag ant-tag-cyan"
-            style="margin-inline-end:4px"
+            style="margin-right:3px"
           >
-            <span>
-              cyan
-            </span>
+            cyan
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
diff --git a/components/select/demo/custom-tag-render.tsx b/components/select/demo/custom-tag-render.tsx
index 9ef9201589..e84fe3673d 100644
--- a/components/select/demo/custom-tag-render.tsx
+++ b/components/select/demo/custom-tag-render.tsx
@@ -4,12 +4,7 @@ import type { SelectProps } from 'antd';
 
 type TagRender = SelectProps['tagRender'];
 
-const options: SelectProps['options'] = [
-  { value: 'gold', label: <span>gold</span> },
-  { value: 'lime', label: <span>lime</span> },
-  { value: 'green', label: <span>green</span> },
-  { value: 'cyan', label: <span>cyan</span> },
-];
+const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
 
 const tagRender: TagRender = (props) => {
   const { label, value, closable, onClose } = props;
@@ -23,7 +18,7 @@ const tagRender: TagRender = (props) => {
       onMouseDown={onPreventMouseDown}
       closable={closable}
       onClose={onClose}
-      style={{ marginInlineEnd: 4 }}
+      style={{ marginRight: 3 }}
     >
       {label}
     </Tag>
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 70411d8639..376e356b05 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -86,20 +86,16 @@ exports[`renders components/table/demo/basic.tsx extend context correctly 1`] =
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-green"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        NICE
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        DEVELOPER
-                      </span>
-                    </div>
+                      NICE
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-geekblue"
+                    >
+                      DEVELOPER
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -148,15 +144,11 @@ exports[`renders components/table/demo/basic.tsx extend context correctly 1`] =
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-volcano"
                     >
-                      <span
-                        class="ant-tag ant-tag-volcano"
-                      >
-                        LOSER
-                      </span>
-                    </div>
+                      LOSER
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -205,20 +197,16 @@ exports[`renders components/table/demo/basic.tsx extend context correctly 1`] =
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-green"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        COOL
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        TEACHER
-                      </span>
-                    </div>
+                      COOL
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-geekblue"
+                    >
+                      TEACHER
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -17462,20 +17450,16 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-blue"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        NICE
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        DEVELOPER
-                      </span>
-                    </div>
+                      nice
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-blue"
+                    >
+                      developer
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -17527,15 +17511,11 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-blue"
                     >
-                      <span
-                        class="ant-tag ant-tag-volcano"
-                      >
-                        LOSER
-                      </span>
-                    </div>
+                      loser
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -17587,20 +17567,16 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-blue"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        COOL
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        TEACHER
-                      </span>
-                    </div>
+                      cool
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-blue"
+                    >
+                      teacher
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -22959,9 +22935,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                     <td
                       class="ant-table-cell"
                     >
-                      <div
-                        class="ant-flex ant-flex-gap-small"
-                      >
+                      <span>
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -22972,7 +22946,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                         >
                           DEVELOPER
                         </span>
-                      </div>
+                      </span>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -23021,15 +22995,13 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                     <td
                       class="ant-table-cell"
                     >
-                      <div
-                        class="ant-flex ant-flex-gap-small"
-                      >
+                      <span>
                         <span
                           class="ant-tag ant-tag-volcano"
                         >
                           LOSER
                         </span>
-                      </div>
+                      </span>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -23078,9 +23050,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                     <td
                       class="ant-table-cell"
                     >
-                      <div
-                        class="ant-flex ant-flex-gap-small"
-                      >
+                      <span>
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -23091,7 +23061,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                         >
                           TEACHER
                         </span>
-                      </div>
+                      </span>
                     </td>
                     <td
                       class="ant-table-cell"
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index cc1647a8ae..e28d1ab0d8 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -86,20 +86,16 @@ exports[`renders components/table/demo/basic.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-green"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        NICE
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        DEVELOPER
-                      </span>
-                    </div>
+                      NICE
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-geekblue"
+                    >
+                      DEVELOPER
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -150,15 +146,11 @@ exports[`renders components/table/demo/basic.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-volcano"
                     >
-                      <span
-                        class="ant-tag ant-tag-volcano"
-                      >
-                        LOSER
-                      </span>
-                    </div>
+                      LOSER
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -209,20 +201,16 @@ exports[`renders components/table/demo/basic.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-green"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        COOL
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        TEACHER
-                      </span>
-                    </div>
+                      COOL
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-geekblue"
+                    >
+                      TEACHER
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -14029,20 +14017,16 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-blue"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        NICE
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        DEVELOPER
-                      </span>
-                    </div>
+                      nice
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-blue"
+                    >
+                      developer
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -14096,15 +14080,11 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-blue"
                     >
-                      <span
-                        class="ant-tag ant-tag-volcano"
-                      >
-                        LOSER
-                      </span>
-                    </div>
+                      loser
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -14158,20 +14138,16 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <div
-                      class="ant-flex ant-flex-gap-small"
+                    <span
+                      class="ant-tag ant-tag-blue"
                     >
-                      <span
-                        class="ant-tag ant-tag-green"
-                      >
-                        COOL
-                      </span>
-                      <span
-                        class="ant-tag ant-tag-geekblue"
-                      >
-                        TEACHER
-                      </span>
-                    </div>
+                      cool
+                    </span>
+                    <span
+                      class="ant-tag ant-tag-blue"
+                    >
+                      teacher
+                    </span>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -18379,9 +18355,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <div
-                        class="ant-flex ant-flex-gap-small"
-                      >
+                      <span>
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -18392,7 +18366,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                         >
                           DEVELOPER
                         </span>
-                      </div>
+                      </span>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -18443,15 +18417,13 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <div
-                        class="ant-flex ant-flex-gap-small"
-                      >
+                      <span>
                         <span
                           class="ant-tag ant-tag-volcano"
                         >
                           LOSER
                         </span>
-                      </div>
+                      </span>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -18502,9 +18474,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <div
-                        class="ant-flex ant-flex-gap-small"
-                      >
+                      <span>
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -18515,7 +18485,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                         >
                           TEACHER
                         </span>
-                      </div>
+                      </span>
                     </td>
                     <td
                       class="ant-table-cell"
diff --git a/components/table/demo/basic.tsx b/components/table/demo/basic.tsx
index 5f40fcb96f..9f23492aec 100644
--- a/components/table/demo/basic.tsx
+++ b/components/table/demo/basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Space, Table, Tag } from 'antd';
+import { Space, Table, Tag } from 'antd';
 import type { TableProps } from 'antd';
 
 interface DataType {
@@ -32,8 +32,8 @@ const columns: TableProps<DataType>['columns'] = [
     key: 'tags',
     dataIndex: 'tags',
     render: (_, { tags }) => (
-      <Flex gap="small">
-        {tags.map<React.ReactNode>((tag) => {
+      <>
+        {tags.map((tag) => {
           let color = tag.length > 5 ? 'geekblue' : 'green';
           if (tag === 'loser') {
             color = 'volcano';
@@ -44,7 +44,7 @@ const columns: TableProps<DataType>['columns'] = [
             </Tag>
           );
         })}
-      </Flex>
+      </>
     ),
   },
   {
diff --git a/components/table/demo/jsx.tsx b/components/table/demo/jsx.tsx
index f8d54ca8b2..4dadb6720d 100644
--- a/components/table/demo/jsx.tsx
+++ b/components/table/demo/jsx.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Space, Table, Tag } from 'antd';
+import { Space, Table, Tag } from 'antd';
 
 const { Column, ColumnGroup } = Table;
 
@@ -52,19 +52,13 @@ const App: React.FC = () => (
       dataIndex="tags"
       key="tags"
       render={(tags: string[]) => (
-        <Flex gap="small">
-          {tags.map<React.ReactNode>((tag) => {
-            let color = tag.length > 5 ? 'geekblue' : 'green';
-            if (tag === 'loser') {
-              color = 'volcano';
-            }
-            return (
-              <Tag color={color} key={tag}>
-                {tag.toUpperCase()}
-              </Tag>
-            );
-          })}
-        </Flex>
+        <>
+          {tags.map((tag) => (
+            <Tag color="blue" key={tag}>
+              {tag}
+            </Tag>
+          ))}
+        </>
       )}
     />
     <Column
diff --git a/components/table/demo/pagination.tsx b/components/table/demo/pagination.tsx
index 9a2c241b0b..519697b16e 100644
--- a/components/table/demo/pagination.tsx
+++ b/components/table/demo/pagination.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Flex, Radio, Space, Table, Tag } from 'antd';
+import { Radio, Space, Table, Tag } from 'antd';
 import type { TableProps } from 'antd';
 
 type ColumnsType<T extends object> = TableProps<T>['columns'];
@@ -50,8 +50,8 @@ const columns: ColumnsType<DataType> = [
     key: 'tags',
     dataIndex: 'tags',
     render: (tags: string[]) => (
-      <Flex gap="small">
-        {tags.map<React.ReactNode>((tag) => {
+      <span>
+        {tags.map((tag) => {
           let color = tag.length > 5 ? 'geekblue' : 'green';
           if (tag === 'loser') {
             color = 'volcano';
@@ -62,7 +62,7 @@ const columns: ColumnsType<DataType> = [
             </Tag>
           );
         })}
-      </Flex>
+      </span>
     ),
   },
   {
diff --git a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
index d276fb67c8..218e517ec9 100644
--- a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -6,100 +6,96 @@ Array [
     style="margin-bottom: 16px;"
   >
     <div>
-      <div
-        class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+      <span
+        style="display: inline-block;"
       >
         <span
-          style="display: inline-block;"
+          class="ant-tag"
         >
+          Tag 1
           <span
-            class="ant-tag"
+            aria-label="close"
+            class="anticon anticon-close ant-tag-close-icon"
+            role="img"
+            tabindex="-1"
           >
-            Tag 1
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tag-close-icon"
-              role="img"
-              tabindex="-1"
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                fill-rule="evenodd"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
           </span>
         </span>
+      </span>
+      <span
+        style="display: inline-block;"
+      >
         <span
-          style="display: inline-block;"
+          class="ant-tag"
         >
+          Tag 2
           <span
-            class="ant-tag"
+            aria-label="close"
+            class="anticon anticon-close ant-tag-close-icon"
+            role="img"
+            tabindex="-1"
           >
-            Tag 2
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tag-close-icon"
-              role="img"
-              tabindex="-1"
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                fill-rule="evenodd"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
           </span>
         </span>
+      </span>
+      <span
+        style="display: inline-block;"
+      >
         <span
-          style="display: inline-block;"
+          class="ant-tag"
         >
+          Tag 3
           <span
-            class="ant-tag"
+            aria-label="close"
+            class="anticon anticon-close ant-tag-close-icon"
+            role="img"
+            tabindex="-1"
           >
-            Tag 3
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tag-close-icon"
-              role="img"
-              tabindex="-1"
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                fill-rule="evenodd"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
           </span>
         </span>
-      </div>
+      </span>
     </div>
   </div>,
   <span
@@ -136,14 +132,12 @@ Array [
 exports[`renders components/tag/demo/animation.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
-<div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
->
+Array [
   <span
     class="ant-tag"
   >
     Tag 1
-  </span>
+  </span>,
   <span
     class="ant-tag"
   >
@@ -152,7 +146,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
     >
       Link
     </a>
-  </span>
+  </span>,
   <span
     class="ant-tag"
   >
@@ -178,7 +172,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
         />
       </svg>
     </span>
-  </span>
+  </span>,
   <span
     class="ant-tag"
   >
@@ -207,8 +201,8 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
         </svg>
       </span>
     </span>
-  </span>
-</div>
+  </span>,
+]
 `;
 
 exports[`renders components/tag/demo/basic.tsx extend context correctly 2`] = `[]`;
@@ -216,7 +210,8 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 2`] = `[
 exports[`renders components/tag/demo/borderless.tsx extend context correctly 1`] = `
 Array [
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-borderless"
@@ -286,7 +281,8 @@ Array [
     role="separator"
   />,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-processing ant-tag-borderless"
@@ -374,7 +370,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
   style="background-color: rgb(245, 245, 245); padding: 16px;"
 >
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-borderless"
@@ -444,7 +441,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
     role="separator"
   />
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-magenta ant-tag-borderless"
@@ -509,7 +507,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
 
 exports[`renders components/tag/demo/checkable.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-align-center ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap ant-flex-align-center"
+  style="gap: 4px 0;"
 >
   <span>
     Categories:
@@ -552,7 +551,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-magenta"
@@ -621,7 +621,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-has-color"
@@ -655,7 +656,8 @@ exports[`renders components/tag/demo/colorful.tsx extend context correctly 2`] =
 
 exports[`renders components/tag/demo/colorful-inverse.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap: 4px 0;"
 >
   <span
     class="ant-tag ant-tag-magenta-inverse"
@@ -719,7 +721,8 @@ exports[`renders components/tag/demo/colorful-inverse.tsx extend context correct
 
 exports[`renders components/tag/demo/control.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap: 4px 0;"
 >
   <span
     class="ant-tag"
@@ -824,7 +827,8 @@ exports[`renders components/tag/demo/control.tsx extend context correctly 2`] =
 
 exports[`renders components/tag/demo/customize.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap: 4px 0;"
 >
   <span
     class="ant-tag"
@@ -873,7 +877,8 @@ exports[`renders components/tag/demo/customize.tsx extend context correctly 2`]
 exports[`renders components/tag/demo/draggable.tsx extend context correctly 1`] = `
 Array [
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag"
@@ -916,7 +921,8 @@ exports[`renders components/tag/demo/draggable.tsx extend context correctly 2`]
 
 exports[`renders components/tag/demo/icon.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap: 4px 0;"
 >
   <span
     class="ant-tag ant-tag-has-color"
@@ -1044,7 +1050,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-success"
@@ -1083,7 +1090,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap: 4px 0;"
   >
     <span
       class="ant-tag ant-tag-success"
diff --git a/components/tag/__tests__/__snapshots__/demo.test.ts.snap b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
index a41e01153f..2f28ba8c70 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
@@ -6,100 +6,96 @@ Array [
     style="margin-bottom:16px"
   >
     <div>
-      <div
-        class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+      <span
+        style="display:inline-block"
       >
         <span
-          style="display:inline-block"
+          class="ant-tag"
         >
+          Tag 1
           <span
-            class="ant-tag"
+            aria-label="close"
+            class="anticon anticon-close ant-tag-close-icon"
+            role="img"
+            tabindex="-1"
           >
-            Tag 1
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tag-close-icon"
-              role="img"
-              tabindex="-1"
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                fill-rule="evenodd"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
           </span>
         </span>
+      </span>
+      <span
+        style="display:inline-block"
+      >
         <span
-          style="display:inline-block"
+          class="ant-tag"
         >
+          Tag 2
           <span
-            class="ant-tag"
+            aria-label="close"
+            class="anticon anticon-close ant-tag-close-icon"
+            role="img"
+            tabindex="-1"
           >
-            Tag 2
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tag-close-icon"
-              role="img"
-              tabindex="-1"
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                fill-rule="evenodd"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
           </span>
         </span>
+      </span>
+      <span
+        style="display:inline-block"
+      >
         <span
-          style="display:inline-block"
+          class="ant-tag"
         >
+          Tag 3
           <span
-            class="ant-tag"
+            aria-label="close"
+            class="anticon anticon-close ant-tag-close-icon"
+            role="img"
+            tabindex="-1"
           >
-            Tag 3
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tag-close-icon"
-              role="img"
-              tabindex="-1"
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                fill-rule="evenodd"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
           </span>
         </span>
-      </div>
+      </span>
     </div>
   </div>,
   <span
@@ -134,14 +130,12 @@ Array [
 `;
 
 exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
-<div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
->
+Array [
   <span
     class="ant-tag"
   >
     Tag 1
-  </span>
+  </span>,
   <span
     class="ant-tag"
   >
@@ -150,7 +144,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
     >
       Link
     </a>
-  </span>
+  </span>,
   <span
     class="ant-tag"
   >
@@ -176,7 +170,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
         />
       </svg>
     </span>
-  </span>
+  </span>,
   <span
     class="ant-tag"
   >
@@ -205,14 +199,15 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
         </svg>
       </span>
     </span>
-  </span>
-</div>
+  </span>,
+]
 `;
 
 exports[`renders components/tag/demo/borderless.tsx correctly 1`] = `
 Array [
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-borderless"
@@ -282,7 +277,8 @@ Array [
     role="separator"
   />,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-processing ant-tag-borderless"
@@ -368,7 +364,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
   style="background-color:#f5f5f5;padding:16px"
 >
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-borderless"
@@ -438,7 +435,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
     role="separator"
   />
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-magenta ant-tag-borderless"
@@ -501,7 +499,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
 
 exports[`renders components/tag/demo/checkable.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-align-center ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap ant-flex-align-center"
+  style="gap:4px 0"
 >
   <span>
     Categories:
@@ -542,7 +541,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-magenta"
@@ -611,7 +611,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-has-color"
@@ -643,7 +644,8 @@ Array [
 
 exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap:4px 0"
 >
   <span
     class="ant-tag ant-tag-magenta-inverse"
@@ -705,7 +707,8 @@ exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
 
 exports[`renders components/tag/demo/control.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap:4px 0"
 >
   <span
     class="ant-tag"
@@ -808,7 +811,8 @@ exports[`renders components/tag/demo/control.tsx correctly 1`] = `
 
 exports[`renders components/tag/demo/customize.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap:4px 0"
 >
   <span
     class="ant-tag"
@@ -854,7 +858,8 @@ exports[`renders components/tag/demo/customize.tsx correctly 1`] = `
 
 exports[`renders components/tag/demo/draggable.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap:4px 0"
 >
   <span
     class="ant-tag"
@@ -879,7 +884,8 @@ exports[`renders components/tag/demo/draggable.tsx correctly 1`] = `
 
 exports[`renders components/tag/demo/icon.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+  class="ant-flex ant-flex-wrap-wrap"
+  style="gap:4px 0"
 >
   <span
     class="ant-tag ant-tag-has-color"
@@ -1005,7 +1011,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-success"
@@ -1044,7 +1051,8 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+    class="ant-flex ant-flex-wrap-wrap"
+    style="gap:4px 0"
   >
     <span
       class="ant-tag ant-tag-success"
diff --git a/components/tag/demo/animation.tsx b/components/tag/demo/animation.tsx
index df51cd44ed..9109e1b96e 100644
--- a/components/tag/demo/animation.tsx
+++ b/components/tag/demo/animation.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import type { InputRef } from 'antd';
-import { Flex, Input, Tag, theme } from 'antd';
+import { Input, Tag, theme } from 'antd';
 import { TweenOneGroup } from 'rc-tween-one';
 
 const App: React.FC = () => {
@@ -73,9 +73,7 @@ const App: React.FC = () => {
             }
           }}
         >
-          <Flex gap="small" wrap="wrap">
-            {tagChild}
-          </Flex>
+          {tagChild}
         </TweenOneGroup>
       </div>
       {inputVisible ? (
diff --git a/components/tag/demo/basic.tsx b/components/tag/demo/basic.tsx
index 5476737640..21134b87d6 100644
--- a/components/tag/demo/basic.tsx
+++ b/components/tag/demo/basic.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Flex, Tag } from 'antd';
+import { Tag } from 'antd';
 
 const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
   e.preventDefault();
@@ -8,7 +8,7 @@ const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
 };
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <>
     <Tag>Tag 1</Tag>
     <Tag>
       <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
@@ -19,7 +19,7 @@ const App: React.FC = () => (
     <Tag closeIcon={<CloseCircleOutlined />} onClose={console.log}>
       Tag 2
     </Tag>
-  </Flex>
+  </>
 );
 
 export default App;
diff --git a/components/tag/demo/borderless.tsx b/components/tag/demo/borderless.tsx
index 26ccb9ae98..da95014d87 100644
--- a/components/tag/demo/borderless.tsx
+++ b/components/tag/demo/borderless.tsx
@@ -3,7 +3,7 @@ import { Divider, Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       <Tag bordered={false}>Tag 1</Tag>
       <Tag bordered={false}>Tag 2</Tag>
       <Tag bordered={false} closable>
@@ -14,7 +14,7 @@ const App: React.FC = () => (
       </Tag>
     </Flex>
     <Divider />
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       <Tag bordered={false} color="processing">
         processing
       </Tag>
diff --git a/components/tag/demo/borderlessLayout.tsx b/components/tag/demo/borderlessLayout.tsx
index 8ad6fc8618..a3c614732d 100644
--- a/components/tag/demo/borderlessLayout.tsx
+++ b/components/tag/demo/borderlessLayout.tsx
@@ -5,7 +5,7 @@ const App: React.FC = () => {
   const { token } = theme.useToken();
   return (
     <div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>
-      <Flex gap="small" wrap="wrap">
+      <Flex gap="4px 0" wrap="wrap">
         <Tag bordered={false}>Tag 1</Tag>
         <Tag bordered={false}>Tag 2</Tag>
         <Tag bordered={false} closable>
@@ -16,7 +16,7 @@ const App: React.FC = () => {
         </Tag>
       </Flex>
       <Divider />
-      <Flex gap="small" wrap="wrap">
+      <Flex gap="4px 0" wrap="wrap">
         <Tag bordered={false} color="magenta">
           magenta
         </Tag>
diff --git a/components/tag/demo/checkable.tsx b/components/tag/demo/checkable.tsx
index 412052603f..65cea1425d 100644
--- a/components/tag/demo/checkable.tsx
+++ b/components/tag/demo/checkable.tsx
@@ -14,7 +14,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <Flex gap="small" wrap="wrap" align="center">
+    <Flex gap="4px 0" wrap="wrap" align="center">
       <span>Categories:</span>
       {tagsData.map<React.ReactNode>((tag) => (
         <Tag.CheckableTag
diff --git a/components/tag/demo/colorful-inverse.tsx b/components/tag/demo/colorful-inverse.tsx
index 3a976bc25e..f19b365a96 100644
--- a/components/tag/demo/colorful-inverse.tsx
+++ b/components/tag/demo/colorful-inverse.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="4px 0" wrap="wrap">
     <Tag color="magenta-inverse">magenta</Tag>
     <Tag color="red-inverse">red</Tag>
     <Tag color="volcano-inverse">volcano</Tag>
diff --git a/components/tag/demo/colorful.tsx b/components/tag/demo/colorful.tsx
index 0ab8125033..e0e4e4765f 100644
--- a/components/tag/demo/colorful.tsx
+++ b/components/tag/demo/colorful.tsx
@@ -4,7 +4,7 @@ import { Divider, Flex, Tag } from 'antd';
 const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       <Tag color="magenta">magenta</Tag>
       <Tag color="red">red</Tag>
       <Tag color="volcano">volcano</Tag>
@@ -18,7 +18,7 @@ const App: React.FC = () => (
       <Tag color="purple">purple</Tag>
     </Flex>
     <Divider orientation="left">Custom</Divider>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       <Tag color="#f50">#f50</Tag>
       <Tag color="#2db7f5">#2db7f5</Tag>
       <Tag color="#87d068">#87d068</Tag>
diff --git a/components/tag/demo/component-token.tsx b/components/tag/demo/component-token.tsx
index fa918c49cb..f47a7fa493 100644
--- a/components/tag/demo/component-token.tsx
+++ b/components/tag/demo/component-token.tsx
@@ -6,7 +6,7 @@ const App: React.FC = () => (
   <ConfigProvider
     theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }}
   >
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       <Tag>
         <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
       </Tag>
diff --git a/components/tag/demo/control.tsx b/components/tag/demo/control.tsx
index fcb775981b..bf25ca662b 100644
--- a/components/tag/demo/control.tsx
+++ b/components/tag/demo/control.tsx
@@ -71,7 +71,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       {tags.map<React.ReactNode>((tag, index) => {
         if (editInputIndex === index) {
           return (
diff --git a/components/tag/demo/customize.tsx b/components/tag/demo/customize.tsx
index d52605cb79..007608b36c 100644
--- a/components/tag/demo/customize.tsx
+++ b/components/tag/demo/customize.tsx
@@ -3,7 +3,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="4px 0" wrap="wrap">
     <Tag closable closeIcon="关 闭">
       Tag1
     </Tag>
diff --git a/components/tag/demo/draggable.tsx b/components/tag/demo/draggable.tsx
index 6b0dcca70b..ad4b7e792e 100644
--- a/components/tag/demo/draggable.tsx
+++ b/components/tag/demo/draggable.tsx
@@ -68,7 +68,7 @@ const App: React.FC = () => {
   return (
     <DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
       <SortableContext items={items} strategy={horizontalListSortingStrategy}>
-        <Flex gap="small" wrap="wrap">
+        <Flex gap="4px 0" wrap="wrap">
           {items.map<React.ReactNode>((item) => (
             <DraggableTag tag={item} key={item.id} />
           ))}
diff --git a/components/tag/demo/icon.tsx b/components/tag/demo/icon.tsx
index 5749eb0f7f..04fbbe9563 100644
--- a/components/tag/demo/icon.tsx
+++ b/components/tag/demo/icon.tsx
@@ -8,7 +8,7 @@ import {
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="4px 0" wrap="wrap">
     <Tag icon={<TwitterOutlined />} color="#55acee">
       Twitter
     </Tag>
diff --git a/components/tag/demo/status.tsx b/components/tag/demo/status.tsx
index 91d55f375b..af768a92c5 100644
--- a/components/tag/demo/status.tsx
+++ b/components/tag/demo/status.tsx
@@ -12,7 +12,7 @@ import { Divider, Flex, Tag } from 'antd';
 const App: React.FC = () => (
   <>
     <Divider orientation="left">Without icon</Divider>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       <Tag color="success">success</Tag>
       <Tag color="processing">processing</Tag>
       <Tag color="error">error</Tag>
@@ -20,7 +20,7 @@ const App: React.FC = () => (
       <Tag color="default">default</Tag>
     </Flex>
     <Divider orientation="left">With icon</Divider>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="4px 0" wrap="wrap">
       <Tag icon={<CheckCircleOutlined />} color="success">
         success
       </Tag>
diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts
index 365b095849..4165b0abe9 100644
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@@ -40,6 +40,8 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
       ...resetComponent(token),
       display: 'inline-block',
       height: 'auto',
+      // https://github.com/ant-design/ant-design/pull/47504
+      marginInlineEnd: token.marginXS,
       paddingInline,
       fontSize: token.tagFontSize,
       lineHeight: token.tagLineHeight,