diff --git a/packages/card/src/components/Card/style.ts b/packages/card/src/components/Card/style.ts
index 80d89b522ffd..e3537c9b100a 100644
--- a/packages/card/src/components/Card/style.ts
+++ b/packages/card/src/components/Card/style.ts
@@ -78,29 +78,6 @@ const genProCardStyle: GenerateStyle<ProCardToken> = (token) => {
         ...genActiveStyle(token),
       },
 
-      '&&-size-small': {
-        [componentCls]: {
-          '&-header': {
-            paddingInline: token.paddingSM,
-            paddingBlock: token.paddingXS,
-            paddingBlockEnd: 0,
-
-            '&-border': {
-              paddingBlockEnd: token.paddingXS,
-            },
-          },
-
-          '&-title': {
-            fontSize: token.fontSize,
-          },
-
-          '&-body': {
-            paddingInline: token.paddingSM,
-            paddingBlock: token.paddingSM,
-          },
-        },
-      },
-
       '&&-ghost': {
         backgroundColor: 'transparent',
 
@@ -209,6 +186,32 @@ const genProCardStyle: GenerateStyle<ProCardToken> = (token) => {
           justifyContent: 'center',
         },
       },
+
+      '&&-size-small': {
+        [componentCls]: {
+          '&-header': {
+            paddingInline: token.paddingSM,
+            paddingBlock: token.paddingXS,
+            paddingBlockEnd: 0,
+
+            '&-border': {
+              paddingBlockEnd: token.paddingXS,
+            },
+          },
+
+          '&-title': {
+            fontSize: token.fontSize,
+          },
+
+          '&-body': {
+            paddingInline: token.paddingSM,
+            paddingBlock: token.paddingSM,
+          },
+        },
+        [`${componentCls}-header${componentCls}-header-collapsible`]: {
+          paddingBlock: token.paddingXS,
+        },
+      },
     },
 
     [`${componentCls}-col`]: {
diff --git a/packages/card/src/demos/collapsible.tsx b/packages/card/src/demos/collapsible.tsx
index a694ea1196e4..23fe5bc95340 100644
--- a/packages/card/src/demos/collapsible.tsx
+++ b/packages/card/src/demos/collapsible.tsx
@@ -7,7 +7,14 @@ export default () => {
   const [collapsed, setCollapsed] = useState(true);
 
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 24,
+        gap: 12,
+      }}
+    >
       <ProCard
         title="可折叠"
         headerBordered
@@ -27,6 +34,47 @@ export default () => {
       >
         内容
       </ProCard>
+      <ProCard
+        title="可折叠"
+        bordered
+        headerBordered
+        collapsible
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            提交
+          </Button>
+        }
+      >
+        内容
+      </ProCard>
+      <ProCard
+        bordered
+        size="small"
+        title="可折叠"
+        headerBordered
+        collapsible
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            提交
+          </Button>
+        }
+      >
+        内容
+      </ProCard>
       <ProCard
         title="可折叠-受控自定义"
         extra={
@@ -57,6 +105,6 @@ export default () => {
       >
         内容
       </ProCard>
-    </>
+    </div>
   );
 };
diff --git a/tests/card/__snapshots__/demo.test.ts.snap b/tests/card/__snapshots__/demo.test.ts.snap
index 770494ee8c69..421f7e92845a 100644
--- a/tests/card/__snapshots__/demo.test.ts.snap
+++ b/tests/card/__snapshots__/demo.test.ts.snap
@@ -7498,117 +7498,219 @@ exports[`card demos 📸 renders ./packages/card/src/demos/collapsible.tsx corre
     test
   </div>
   <div
-    class="ant-pro-card ant-pro-card-collapse"
+    style="display: flex; flex-direction: column; padding: 24px; gap: 12px;"
   >
     <div
-      class="ant-pro-card-header ant-pro-card-header-border ant-pro-card-header-collapsible"
+      class="ant-pro-card ant-pro-card-collapse"
     >
       <div
-        class="ant-pro-card-title "
+        class="ant-pro-card-header ant-pro-card-header-border ant-pro-card-header-collapsible"
       >
-        <span
-          aria-label="right"
-          class="anticon anticon-right ant-pro-card-collapsible-icon "
-          role="img"
+        <div
+          class="ant-pro-card-title "
         >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          <span
+            aria-label="right"
+            class="anticon anticon-right ant-pro-card-collapsible-icon "
+            role="img"
           >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-        可折叠
+            <svg
+              aria-hidden="true"
+              data-icon="right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+              />
+            </svg>
+          </span>
+          可折叠
+        </div>
+        <div
+          class="ant-pro-card-extra "
+        >
+          <button
+            class="ant-btn ant-btn-default ant-btn-sm"
+            type="button"
+          >
+            <span>
+              提 交
+            </span>
+          </button>
+        </div>
       </div>
       <div
-        class="ant-pro-card-extra "
+        class="ant-pro-card-body"
       >
-        <button
-          class="ant-btn ant-btn-default ant-btn-sm"
-          type="button"
-        >
-          <span>
-            提 交
-          </span>
-        </button>
+        内容
       </div>
     </div>
     <div
-      class="ant-pro-card-body"
-    >
-      内容
-    </div>
-  </div>
-  <div
-    class="ant-pro-card ant-pro-card-collapse"
-    style="margin-block-start: 16px;"
-  >
-    <div
-      class="ant-pro-card-header ant-pro-card-header-border"
+      class="ant-pro-card ant-pro-card-border ant-pro-card-collapse"
     >
       <div
-        class="ant-pro-card-title "
+        class="ant-pro-card-header ant-pro-card-header-border ant-pro-card-header-collapsible"
       >
-        可折叠-受控自定义
+        <div
+          class="ant-pro-card-title "
+        >
+          <span
+            aria-label="right"
+            class="anticon anticon-right ant-pro-card-collapsible-icon "
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+              />
+            </svg>
+          </span>
+          可折叠
+        </div>
+        <div
+          class="ant-pro-card-extra "
+        >
+          <button
+            class="ant-btn ant-btn-default ant-btn-sm"
+            type="button"
+          >
+            <span>
+              提 交
+            </span>
+          </button>
+        </div>
       </div>
       <div
-        class="ant-pro-card-extra "
+        class="ant-pro-card-body"
       >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
+        内容
       </div>
     </div>
     <div
-      class="ant-pro-card-body"
+      class="ant-pro-card ant-pro-card-border ant-pro-card-size-small ant-pro-card-collapse"
     >
-      内容
+      <div
+        class="ant-pro-card-header ant-pro-card-header-border ant-pro-card-header-collapsible"
+      >
+        <div
+          class="ant-pro-card-title "
+        >
+          <span
+            aria-label="right"
+            class="anticon anticon-right ant-pro-card-collapsible-icon "
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+              />
+            </svg>
+          </span>
+          可折叠
+        </div>
+        <div
+          class="ant-pro-card-extra "
+        >
+          <button
+            class="ant-btn ant-btn-default ant-btn-sm"
+            type="button"
+          >
+            <span>
+              提 交
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="ant-pro-card-body"
+      >
+        内容
+      </div>
     </div>
-  </div>
-  <div
-    class="ant-pro-card ant-pro-card-collapse"
-    style="margin-block-start: 16px;"
-  >
     <div
-      class="ant-pro-card-header ant-pro-card-header-border ant-pro-card-header-collapsible"
+      class="ant-pro-card ant-pro-card-collapse"
+      style="margin-block-start: 16px;"
     >
       <div
-        class="ant-pro-card-title "
+        class="ant-pro-card-header ant-pro-card-header-border"
       >
-        <span>
-          收起 - 
-        </span>
-        可折叠-图标自定义
+        <div
+          class="ant-pro-card-title "
+        >
+          可折叠-受控自定义
+        </div>
+        <div
+          class="ant-pro-card-extra "
+        >
+          <span
+            aria-label="right"
+            class="anticon anticon-right"
+            role="img"
+            tabindex="-1"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+      <div
+        class="ant-pro-card-body"
+      >
+        内容
       </div>
     </div>
     <div
-      class="ant-pro-card-body"
+      class="ant-pro-card ant-pro-card-collapse"
+      style="margin-block-start: 16px;"
     >
-      内容
+      <div
+        class="ant-pro-card-header ant-pro-card-header-border ant-pro-card-header-collapsible"
+      >
+        <div
+          class="ant-pro-card-title "
+        >
+          <span>
+            收起 - 
+          </span>
+          可折叠-图标自定义
+        </div>
+      </div>
+      <div
+        class="ant-pro-card-body"
+      >
+        内容
+      </div>
     </div>
   </div>
 </DocumentFragment>