From 61aeeea541587cee47e55283e9c935c406a4b24d Mon Sep 17 00:00:00 2001
From: Abhishek B R <byteblaster1468@gmail.com>
Date: Sun, 18 Oct 2026 12:12:02 +0530
Subject: [PATCH 1/2] fix(react-email): keep a longhand padding of 0 on Button

parsePadding returned undefined for a longhand set to the number 0
because it used a truthiness check before converting to px. Button
spreads the original style first and then the parsed longhands, so an
undefined paddingTop is omitted and the padding shorthand wins: with
{ padding: '12px 20px', paddingTop: 0 } the button rendered 12px of top
padding in every client, while the Outlook spacer was computed as if it
were 0.

Only skip undefined and empty strings, so 0 is passed through.
---
 .changeset/button-zero-padding-longhand.md          |  5 +++++
 .../src/components/button/button.spec.tsx           | 11 +++++++++++
 .../src/components/button/utils/parse-padding.ts    | 13 +++++++++----
 .../src/components/button/utils/utils.spec.ts       | 10 ++++++++++
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/button-zero-padding-longhand.md

diff --git a/.changeset/button-zero-padding-longhand.md b/.changeset/button-zero-padding-longhand.md
new file mode 100644
index 0000000000..5e72433c01
--- /dev/null
+++ b/.changeset/button-zero-padding-longhand.md
@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+`<Button>` no longer drops a longhand padding of `0`, so `style={{ padding: '12px 20px', paddingTop: 0 }}` renders with no top padding instead of falling back to the shorthand's `12px`.
diff --git a/packages/react-email/src/components/button/button.spec.tsx b/packages/react-email/src/components/button/button.spec.tsx
index dbcee2598a..565d0dc533 100644
--- a/packages/react-email/src/components/button/button.spec.tsx
+++ b/packages/react-email/src/components/button/button.spec.tsx
@@ -28,6 +28,17 @@ describe('<Button> component', () => {
     );
   });
 
+  it('does not drop a longhand padding of 0 set after the shorthand', async () => {
+    const html = await render(
+      <Button
+        href="https://example.com"
+        style={{ padding: '12px 20px', paddingTop: 0, paddingBottom: 0 }}
+      />,
+    );
+    expect(html).toContain('padding-top:0;');
+    expect(html).toContain('padding-bottom:0;');
+  });
+
   it('renders the <Button> component with no padding value', async () => {
     const actualOutput = await render(<Button href="https://example.com" />);
     expect(actualOutput).toMatchInlineSnapshot(
diff --git a/packages/react-email/src/components/button/utils/parse-padding.ts b/packages/react-email/src/components/button/utils/parse-padding.ts
index e90d93cab7..936947be12 100644
--- a/packages/react-email/src/components/button/utils/parse-padding.ts
+++ b/packages/react-email/src/components/button/utils/parse-padding.ts
@@ -128,10 +128,15 @@ export function parsePadding(properties: PaddingProperties) {
     }
   }
 
+  // `0` is a real value here: dropping it would let the `padding` shorthand,
+  // which is still spread into the style, win over an explicit `paddingTop: 0`.
+  const toPx = (value: PaddingType) =>
+    value === undefined || value === '' ? undefined : convertToPx(value);
+
   return {
-    paddingTop: paddingTop ? convertToPx(paddingTop) : undefined,
-    paddingRight: paddingRight ? convertToPx(paddingRight) : undefined,
-    paddingBottom: paddingBottom ? convertToPx(paddingBottom) : undefined,
-    paddingLeft: paddingLeft ? convertToPx(paddingLeft) : undefined,
+    paddingTop: toPx(paddingTop),
+    paddingRight: toPx(paddingRight),
+    paddingBottom: toPx(paddingBottom),
+    paddingLeft: toPx(paddingLeft),
   };
 }
diff --git a/packages/react-email/src/components/button/utils/utils.spec.ts b/packages/react-email/src/components/button/utils/utils.spec.ts
index ed6a569d7c..9fc3ac6f3e 100644
--- a/packages/react-email/src/components/button/utils/utils.spec.ts
+++ b/packages/react-email/src/components/button/utils/utils.spec.ts
@@ -109,6 +109,16 @@ describe('parsePadding', () => {
     });
   });
 
+  it('keeps a specific padding value of 0 over the general padding value', () => {
+    const result = parsePadding({ padding: '12px 20px', paddingTop: 0 });
+    expect(result).toEqual({
+      paddingTop: 0,
+      paddingRight: 20,
+      paddingBottom: 12,
+      paddingLeft: 20,
+    });
+  });
+
   it('overrides general padding value with specific padding value if specified', () => {
     const result = parsePadding({ padding: 10, paddingRight: '1em' });
     expect(result).toEqual({

From 0706e110bf610a1055070c05da5965d32afa6866 Mon Sep 17 00:00:00 2001
From: dielduarte <magdiel.kesller@gmail.com>
Date: Wed, 28 Oct 2026 16:17:44 -0400
Subject: [PATCH 2/2] refactor(react-email): handle unset padding in
 convertToPx

---
 .changeset/button-zero-padding-longhand.md      |  2 +-
 .../components/button/utils/parse-padding.ts    | 17 ++++++-----------
 .../src/components/button/utils/utils.spec.ts   | 12 +++++++++++-
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/.changeset/button-zero-padding-longhand.md b/.changeset/button-zero-padding-longhand.md
index 5e72433c01..95b40f2c87 100644
--- a/.changeset/button-zero-padding-longhand.md
+++ b/.changeset/button-zero-padding-longhand.md
@@ -2,4 +2,4 @@
 "react-email": patch
 ---
 
-`<Button>` no longer drops a longhand padding of `0`, so `style={{ padding: '12px 20px', paddingTop: 0 }}` renders with no top padding instead of falling back to the shorthand's `12px`.
+Keep a longhand padding of `0` on `<Button>`
diff --git a/packages/react-email/src/components/button/utils/parse-padding.ts b/packages/react-email/src/components/button/utils/parse-padding.ts
index 936947be12..067d1c4f5b 100644
--- a/packages/react-email/src/components/button/utils/parse-padding.ts
+++ b/packages/react-email/src/components/button/utils/parse-padding.ts
@@ -15,8 +15,8 @@ interface PaddingProperties {
 export function convertToPx(value: PaddingType) {
   let px = 0;
 
-  if (!value) {
-    return px;
+  if (value === undefined || value === '') {
+    return undefined;
   }
 
   if (typeof value === 'number') {
@@ -128,15 +128,10 @@ export function parsePadding(properties: PaddingProperties) {
     }
   }
 
-  // `0` is a real value here: dropping it would let the `padding` shorthand,
-  // which is still spread into the style, win over an explicit `paddingTop: 0`.
-  const toPx = (value: PaddingType) =>
-    value === undefined || value === '' ? undefined : convertToPx(value);
-
   return {
-    paddingTop: toPx(paddingTop),
-    paddingRight: toPx(paddingRight),
-    paddingBottom: toPx(paddingBottom),
-    paddingLeft: toPx(paddingLeft),
+    paddingTop: convertToPx(paddingTop),
+    paddingRight: convertToPx(paddingRight),
+    paddingBottom: convertToPx(paddingBottom),
+    paddingLeft: convertToPx(paddingLeft),
   };
 }
diff --git a/packages/react-email/src/components/button/utils/utils.spec.ts b/packages/react-email/src/components/button/utils/utils.spec.ts
index 9fc3ac6f3e..3f07c8e6da 100644
--- a/packages/react-email/src/components/button/utils/utils.spec.ts
+++ b/packages/react-email/src/components/button/utils/utils.spec.ts
@@ -32,8 +32,18 @@ describe('convertToPx', () => {
     expect(result).toBe(0);
   });
 
-  it('converts empaddingTopy input to 0', () => {
+  it('converts empty input to undefined', () => {
     const result = convertToPx('');
+    expect(result).toBeUndefined();
+  });
+
+  it('converts undefined input to undefined', () => {
+    const result = convertToPx(undefined);
+    expect(result).toBeUndefined();
+  });
+
+  it('keeps 0 as 0', () => {
+    const result = convertToPx(0);
     expect(result).toBe(0);
   });
 });