diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts
index 854decbcdd..2e27b5f273 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts
@@ -1,2 +1,3 @@
 export { default as getTextDimension } from './getTextDimension';
 export { default as computeMaxFontSize } from './computeMaxFontSize';
+export { default as mergeMargin } from './mergeMargin';
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/mergeMargin.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/mergeMargin.ts
new file mode 100644
index 0000000000..82b51f91b9
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/mergeMargin.ts
@@ -0,0 +1,19 @@
+import { Margin } from './types';
+
+export default function mergeMargin(
+  margin1: Partial<Margin> = {},
+  margin2: Partial<Margin> = {},
+  mode: 'expand' | 'shrink' = 'expand',
+) {
+  const { top = 0, left = 0, bottom = 0, right = 0 } = margin1;
+  const { top: top2 = 0, left: left2 = 0, bottom: bottom2 = 0, right: right2 = 0 } = margin2;
+
+  const func = mode === 'expand' ? Math.max : Math.min;
+
+  return {
+    bottom: func(bottom, bottom2),
+    left: func(left, left2),
+    right: func(right, right2),
+    top: func(top, top2),
+  };
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/types.ts
index 0b5e75913e..445bc52cd4 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/types.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/types.ts
@@ -8,3 +8,10 @@ export interface TextStyle {
   fontWeight?: string | number;
   letterSpacing?: string | number;
 }
+
+export interface Margin {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/test/mergeMargin.test.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/test/mergeMargin.test.ts
new file mode 100644
index 0000000000..101feb401f
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/test/mergeMargin.test.ts
@@ -0,0 +1,166 @@
+import { mergeMargin } from '../src';
+
+describe('mergeMargin(margin1, margin2, mode?)', () => {
+  it('combines two given margin', () => {
+    expect(
+      mergeMargin(
+        {
+          top: 1,
+          left: 1,
+          bottom: 2,
+          right: 2,
+        },
+        {
+          top: 2,
+          left: 2,
+          bottom: 1,
+          right: 1,
+        },
+      ),
+    ).toEqual({
+      top: 2,
+      left: 2,
+      bottom: 2,
+      right: 2,
+    });
+  });
+  describe('default values', () => {
+    it('works if margin1 is not defined', () => {
+      expect(
+        mergeMargin(undefined, {
+          top: 2,
+          left: 2,
+          bottom: 1,
+          right: 1,
+        }),
+      ).toEqual({
+        top: 2,
+        left: 2,
+        bottom: 1,
+        right: 1,
+      });
+    });
+    it('works if margin2 is not defined', () => {
+      expect(
+        mergeMargin(
+          {
+            top: 1,
+            left: 1,
+            bottom: 2,
+            right: 2,
+          },
+          undefined,
+        ),
+      ).toEqual({
+        top: 1,
+        left: 1,
+        bottom: 2,
+        right: 2,
+      });
+    });
+    it('use 0 for the side that is not specified', () => {
+      expect(mergeMargin({}, {})).toEqual({
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+      });
+    });
+  });
+  describe('mode', () => {
+    it('if mode=expand, returns the larger margin for each side', () => {
+      expect(
+        mergeMargin(
+          {
+            top: 1,
+            left: 1,
+            bottom: 2,
+            right: 2,
+          },
+          {
+            top: 2,
+            left: 2,
+            bottom: 1,
+            right: 1,
+          },
+          'expand',
+        ),
+      ).toEqual({
+        top: 2,
+        left: 2,
+        bottom: 2,
+        right: 2,
+      });
+    });
+    it('if mode=shrink, returns the smaller margin for each side', () => {
+      expect(
+        mergeMargin(
+          {
+            top: 1,
+            left: 1,
+            bottom: 2,
+            right: 2,
+          },
+          {
+            top: 2,
+            left: 2,
+            bottom: 1,
+            right: 1,
+          },
+          'shrink',
+        ),
+      ).toEqual({
+        top: 1,
+        left: 1,
+        bottom: 1,
+        right: 1,
+      });
+    });
+    it('expand by default', () => {
+      expect(
+        mergeMargin(
+          {
+            top: 1,
+            left: 1,
+            bottom: 2,
+            right: 2,
+          },
+          {
+            top: 2,
+            left: 2,
+            bottom: 1,
+            right: 1,
+          },
+        ),
+      ).toEqual({
+        top: 2,
+        left: 2,
+        bottom: 2,
+        right: 2,
+      });
+    });
+  });
+  it('works correctly for negative margins', () => {
+    expect(
+      mergeMargin(
+        {
+          top: -3,
+          left: -3,
+          bottom: -2,
+          right: -2,
+        },
+        {
+          top: -2,
+          left: -2,
+          bottom: 0,
+          right: -1,
+        },
+      ),
+    ).toEqual({
+      top: -2,
+      left: -2,
+      bottom: 0,
+      right: -1,
+    });
+  });
+});