diff --git a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts
new file mode 100644
index 0000000000..b7bb7aa74c
--- /dev/null
+++ b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+export const userWrapper = style({
+  display: 'flex',
+  gap: '8px',
+});
diff --git a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx
index 45ae473412..af7525131d 100644
--- a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx
+++ b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx
@@ -5,6 +5,8 @@ import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useEffect, useMemo } from 'react';
 
+import { userWrapper } from './created-updated-by.css';
+
 const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
   const cloudDocMetaService = useService(CloudDocMetaService);
   const cloudDocMeta = useLiveData(cloudDocMetaService.cloudDocMeta.meta$);
@@ -46,10 +48,10 @@ const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
   }
   if (user) {
     return (
-      <>
-        <Avatar url={user.avatarUrl || ''} name={user.name} size={20} />
+      <div className={userWrapper}>
+        <Avatar url={user.avatarUrl || ''} name={user.name} size={22} />
         <span>{user.name}</span>
-      </>
+      </div>
     );
   }
   return <NoRecordValue />;