diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index 86768b508..67c1dd1f5 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -14,6 +14,7 @@ import classNames from '../_util/classNames';
 import ResizeObserver from '../vc-resize-observer';
 import useDestroyed from '../_util/hooks/useDestroyed';
 import type { MouseEventHandler } from '../_util/EventInterface';
+import Space from '../space';
 
 export const pageHeaderProps = () => ({
   backIcon: PropTypes.any,
@@ -123,7 +124,11 @@ const PageHeader = defineComponent({
               {tags && <span class={`${headingPrefixCls}-tags`}>{tags}</span>}
             </div>
           )}
-          {extra && <span class={`${headingPrefixCls}-extra`}>{extra}</span>}
+          {extra && (
+            <span class={`${headingPrefixCls}-extra`}>
+              <Space>{extra}</Space>
+            </span>
+          )}
         </div>
       );
     };
diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less
index 6eeedec96..074145756 100644
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@@ -87,13 +87,8 @@
       white-space: nowrap;
 
       > * {
-        margin-left: @margin-sm;
         white-space: unset;
       }
-
-      > *:first-child {
-        margin-left: 0;
-      }
     }
   }
 
diff --git a/components/page-header/style/index.tsx b/components/page-header/style/index.tsx
index 8ca5d47ad..cd4e5ba32 100644
--- a/components/page-header/style/index.tsx
+++ b/components/page-header/style/index.tsx
@@ -3,3 +3,4 @@ import './index.less';
 // style dependencies
 import '../../breadcrumb/style';
 import '../../avatar/style';
+import '../../space/style';