diff --git a/packages/mui-system/src/Stack/Stack.test.js b/packages/mui-system/src/Stack/Stack.test.js
index c68879b59d5291..a4b5944e762c77 100644
--- a/packages/mui-system/src/Stack/Stack.test.js
+++ b/packages/mui-system/src/Stack/Stack.test.js
@@ -30,23 +30,29 @@ describe('<Stack />', () => {
     ).to.deep.equal({
       '@media (min-width:0px)': {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '8px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
         flexDirection: 'column',
       },
       [`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginLeft: '16px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
         flexDirection: 'row',
       },
       [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginLeft: '32px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
       },
       display: 'flex',
       flexDirection: 'column',
@@ -65,16 +71,20 @@ describe('<Stack />', () => {
     ).to.deep.equal({
       [`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '16px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
         flexDirection: 'column',
       },
       [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginLeft: '16px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
         flexDirection: 'row',
       },
       display: 'flex',
@@ -94,15 +104,19 @@ describe('<Stack />', () => {
     ).to.deep.equal({
       [`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '16px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
       },
       [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '32px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
       },
       display: 'flex',
       flexDirection: 'column',
@@ -121,21 +135,27 @@ describe('<Stack />', () => {
     ).to.deep.equal({
       [`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '16px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
       },
       [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '0px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
       },
       [`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '32px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
       },
       display: 'flex',
       flexDirection: 'column',
@@ -153,9 +173,11 @@ describe('<Stack />', () => {
       }),
     ).to.deep.equal({
       '& > :not(style) ~ :not(style)': {
-        margin: 0,
         marginLeft: '24px',
       },
+      '& > :not(style):not(style)': {
+        margin: 0,
+      },
       display: 'flex',
       flexDirection: 'row',
     });
@@ -173,16 +195,20 @@ describe('<Stack />', () => {
     ).to.deep.equal({
       '@media (min-width:0px)': {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '8px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
         flexDirection: 'column',
       },
       [`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '16px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
       },
       display: 'flex',
       flexDirection: 'column',
@@ -201,9 +227,11 @@ describe('<Stack />', () => {
         }),
       ).to.deep.equal({
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginBottom: '8px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
         display: 'flex',
         flexDirection: 'column-reverse',
       });
@@ -220,22 +248,28 @@ describe('<Stack />', () => {
         }),
       ).to.deep.equal({
         '@media (min-width:0px)': {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '8px',
           },
           flexDirection: 'column',
         },
         [`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginLeft: '16px',
           },
           flexDirection: 'row',
         },
         [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginLeft: '24px',
           },
         },
@@ -272,27 +306,35 @@ describe('<Stack />', () => {
         }),
       ).to.deep.equal({
         [`@media (min-width:${theme.breakpoints.values.xs}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '0px',
           },
         },
         [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '16px',
           },
         },
         [`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginLeft: '16px',
           },
           flexDirection: 'row',
         },
         [`@media (min-width:${theme.breakpoints.values.xl}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginLeft: '32px',
           },
         },
@@ -310,34 +352,44 @@ describe('<Stack />', () => {
         }),
       ).to.deep.equal({
         [`@media (min-width:${theme.breakpoints.values.xs}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '0px',
           },
         },
         [`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginLeft: '0px',
           },
           flexDirection: 'row',
         },
         [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginLeft: '16px',
           },
         },
         [`@media (min-width:${theme.breakpoints.values.lg}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '16px',
           },
           flexDirection: 'column',
         },
         [`@media (min-width:${theme.breakpoints.values.xl}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '32px',
           },
         },
@@ -359,20 +411,26 @@ describe('<Stack />', () => {
         }),
       ).to.deep.equal({
         '@media (min-width:0px)': {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '8px',
           },
         },
         [`@media (min-width:${theme.breakpoints.values.sm}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '16px',
           },
         },
         [`@media (min-width:${theme.breakpoints.values.md}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '24px',
           },
         },
@@ -404,9 +462,11 @@ describe('<Stack />', () => {
         }),
       ).to.deep.equal({
         '& > :not(style) ~ :not(style)': {
-          margin: 0,
           marginTop: '32px',
         },
+        '& > :not(style):not(style)': {
+          margin: 0,
+        },
         display: 'flex',
         flexDirection: 'column',
       });
@@ -435,8 +495,10 @@ describe('<Stack />', () => {
         }),
       ).to.deep.equal({
         [`@media (min-width:${customTheme.breakpoints.values.small}px)`]: {
-          '& > :not(style) ~ :not(style)': {
+          '& > :not(style):not(style)': {
             margin: 0,
+          },
+          '& > :not(style) ~ :not(style)': {
             marginTop: '32px',
           },
         },
diff --git a/packages/mui-system/src/Stack/createStack.tsx b/packages/mui-system/src/Stack/createStack.tsx
index afa2f0d04e58fe..9cbae5fe1fc9ec 100644
--- a/packages/mui-system/src/Stack/createStack.tsx
+++ b/packages/mui-system/src/Stack/createStack.tsx
@@ -135,8 +135,12 @@ export const style = ({ ownerState, theme }: StyleFunctionProps) => {
         return { gap: getValue(transformer, propValue) };
       }
       return {
-        '& > :not(style) ~ :not(style)': {
+        // The useFlexGap={false} implement relies on each child to give up control of the margin.
+        // We need to reset the margin to avoid double spacing.
+        '& > :not(style):not(style)': {
           margin: 0,
+        },
+        '& > :not(style) ~ :not(style)': {
           [`margin${getSideFromDirection(
             breakpoint ? directionValues[breakpoint] : ownerState.direction,
           )}`]: getValue(transformer, propValue),