diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 6a8891b71d..aec2909743 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -148,6 +148,25 @@ export const Padding: Story = {
           <Box {...args}>Padding Left</Box>
         </Box>
       </Flex>
+      <Flex gap="4" align="center">
+        <Box p="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding</Box>
+        </Box>
+        <Box px="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding X</Box>
+        </Box>
+        <Box py="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding Y</Box>
+        </Box>
+      </Flex>
+      <Flex gap="4" align="center">
+        <Box pt="10px" pb="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding Top Bottom</Box>
+        </Box>
+        <Box pl="10px" pr="10px" style={styleInsideBox}>
+          <Box {...args}>Custom Padding Left Right</Box>
+        </Box>
+      </Flex>
     </Flex>
   ),
 };
@@ -204,10 +223,32 @@ export const Margin: Story = {
       </Flex>
       <Flex align="center" gap="4">
         <Box style={styleInsideBox}>
-          <Box p="40px" {...args}>
+          <Box m="10px" {...args}>
             Custom Margin
           </Box>
         </Box>
+        <Box style={styleInsideBox}>
+          <Box mx="10px" {...args}>
+            Custom Margin X
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box my="10px" {...args}>
+            Custom Margin Y
+          </Box>
+        </Box>
+      </Flex>
+      <Flex align="center" gap="4">
+        <Box style={styleInsideBox}>
+          <Box mt="10px" mb="10px" {...args}>
+            Custom Margin Top Bottom
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box ml="10px" mr="10px" {...args}>
+            Custom Margin Left Right
+          </Box>
+        </Box>
       </Flex>
     </Flex>
   ),
diff --git a/packages/canon/src/css/utilities/m.css b/packages/canon/src/css/utilities/m.css
index 00a30cc8b1..ecee3aca35 100644
--- a/packages/canon/src/css/utilities/m.css
+++ b/packages/canon/src/css/utilities/m.css
@@ -1,5 +1,5 @@
 .cu-m {
-  margin: var(--p);
+  margin: var(--m);
 }
 
 .cu-m-0\.5 {
diff --git a/packages/canon/src/css/utilities/mb.css b/packages/canon/src/css/utilities/mb.css
index 4fbf8d614f..6d3831bad3 100644
--- a/packages/canon/src/css/utilities/mb.css
+++ b/packages/canon/src/css/utilities/mb.css
@@ -1,5 +1,5 @@
 .cu-mb {
-  margin-bottom: var(--pb);
+  margin-bottom: var(--mb);
 }
 
 .cu-mb-0\.5 {
diff --git a/packages/canon/src/css/utilities/ml.css b/packages/canon/src/css/utilities/ml.css
index 887c464df1..b495d1a8bf 100644
--- a/packages/canon/src/css/utilities/ml.css
+++ b/packages/canon/src/css/utilities/ml.css
@@ -1,5 +1,5 @@
 .cu-ml {
-  margin-left: var(--pl);
+  margin-left: var(--ml);
 }
 
 .cu-ml-0\.5 {
diff --git a/packages/canon/src/css/utilities/mr.css b/packages/canon/src/css/utilities/mr.css
index a2c0f8668b..9a179e1103 100644
--- a/packages/canon/src/css/utilities/mr.css
+++ b/packages/canon/src/css/utilities/mr.css
@@ -1,5 +1,5 @@
 .cu-mr {
-  margin-right: var(--pr);
+  margin-right: var(--mr);
 }
 
 .cu-mr-0\.5 {
diff --git a/packages/canon/src/css/utilities/mt.css b/packages/canon/src/css/utilities/mt.css
index b74525b142..2e0815946d 100644
--- a/packages/canon/src/css/utilities/mt.css
+++ b/packages/canon/src/css/utilities/mt.css
@@ -1,5 +1,5 @@
 .cu-mt {
-  margin-top: var(--pt);
+  margin-top: var(--mt);
 }
 
 .cu-mt-0\.5 {
diff --git a/packages/canon/src/css/utilities/mx.css b/packages/canon/src/css/utilities/mx.css
index 6ebbc57367..43f5838e4e 100644
--- a/packages/canon/src/css/utilities/mx.css
+++ b/packages/canon/src/css/utilities/mx.css
@@ -1,6 +1,6 @@
 .cu-mx {
-  margin-left: var(--px);
-  margin-right: var(--px);
+  margin-left: var(--mx);
+  margin-right: var(--mx);
 }
 
 .cu-mx-0\.5 {
diff --git a/packages/canon/src/css/utilities/my.css b/packages/canon/src/css/utilities/my.css
index feb4a6f5bd..ae72ea9209 100644
--- a/packages/canon/src/css/utilities/my.css
+++ b/packages/canon/src/css/utilities/my.css
@@ -1,6 +1,6 @@
 .cu-my {
-  margin-top: var(--py);
-  margin-bottom: var(--py);
+  margin-top: var(--my);
+  margin-bottom: var(--my);
 }
 
 .cu-my-0\.5 {
diff --git a/packages/canon/src/props/margin.props.ts b/packages/canon/src/props/margin.props.ts
index 94ec01cfc8..12cb0989e2 100644
--- a/packages/canon/src/props/margin.props.ts
+++ b/packages/canon/src/props/margin.props.ts
@@ -29,14 +29,14 @@ const marginPropDefs = (spacingValues: string[]) =>
       type: 'enum | string',
       values: spacingValues,
       className: 'cu-mx',
-      customProperties: ['--ml', '--mr'],
+      customProperties: ['--mx'],
       responsive: true,
     },
     my: {
       type: 'enum | string',
       values: spacingValues,
       className: 'cu-my',
-      customProperties: ['--mt', '--mb'],
+      customProperties: ['--my'],
       responsive: true,
     },
     mt: {
diff --git a/packages/canon/src/props/padding.props.ts b/packages/canon/src/props/padding.props.ts
index 4ae686adb9..ea42fcd4f1 100644
--- a/packages/canon/src/props/padding.props.ts
+++ b/packages/canon/src/props/padding.props.ts
@@ -29,14 +29,14 @@ const paddingPropDefs = (spacingValues: string[]) =>
     px: {
       type: 'enum | string',
       className: 'cu-px',
-      customProperties: ['--pl', '--pr'],
+      customProperties: ['--px'],
       values: spacingValues,
       responsive: true,
     },
     py: {
       type: 'enum | string',
       className: 'cu-py',
-      customProperties: ['--pt', '--pb'],
+      customProperties: ['--py'],
       values: spacingValues,
       responsive: true,
     },
diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
index fe3090b6be..746c62ebcc 100644
--- a/packages/canon/src/utils/extractProps.ts
+++ b/packages/canon/src/utils/extractProps.ts
@@ -25,7 +25,7 @@ export function extractProps(
   propDefs: { [key: string]: any },
 ) {
   let className: string[] = (props.className || '').split(' ');
-  let style: React.CSSProperties = props.style || {};
+  let style: React.CSSProperties = { ...props.style };
   const hasProp = (key: string) => props.hasOwnProperty(key);
 
   for (const key in propDefs) {