diff --git a/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json b/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json
new file mode 100644
index 00000000000000..68216fb09d3e85
--- /dev/null
+++ b/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "CardPreview removes own top margin when the first element in a Card",
+  "packageName": "@fluentui/react-card",
+  "email": "andredias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-card/src/components/Card.stories.tsx b/packages/react-card/src/components/Card.stories.tsx
index 3ba0d8157ead18..ff2a10608fb3d3 100644
--- a/packages/react-card/src/components/Card.stories.tsx
+++ b/packages/react-card/src/components/Card.stories.tsx
@@ -96,7 +96,7 @@ export const GridviewCard = () => (
       maxWidth: '368px',
     }}
   >
-    <CardPreview style={{ marginTop: '-12px' }}>
+    <CardPreview>
       <img src="./sales_template.png" alt="Preview of a sales slide deck" />
     </CardPreview>
     <CardHeader
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 8e330f67a7f877..7d69a22224b720 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -20,6 +20,14 @@ const useStyles = makeStyles({
     padding: '12px',
     gap: '12px',
     borderRadius: theme.borderRadiusMedium,
+
+    '> .fluentui-react-card-preview': {
+      marginLeft: '-12px',
+      marginRight: '-12px',
+      '&:first-child': {
+        marginTop: '-12px',
+      },
+    },
   }),
 
   interactive: theme => ({
diff --git a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
index 5fe994eb2f2e7e..89df4c0b92ec76 100644
--- a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
+++ b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CardPreview renders a default state 1`] = `
 <div>
   <div
-    class=""
+    class="fluentui-react-card-preview"
   >
     Default CardPreview
     <div
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index 8e3a5111cc90eb..1779e64c00d2d3 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -30,7 +30,7 @@ const useStyles = makeStyles({
  */
 export const useCardPreviewStyles = (state: CardPreviewState): CardPreviewState => {
   const styles = useStyles();
-  state.className = mergeClasses(styles.root, state.className);
+  state.className = mergeClasses('fluentui-react-card-preview', styles.root, state.className);
 
   if (state.logo) {
     state.logo.className = mergeClasses(styles.logo, state.logo.className);