diff --git a/styles/src/component/margin.ts b/styles/src/component/margin.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6262405f0b150b06085a6e0b639b405991fe6f0
--- /dev/null
+++ b/styles/src/component/margin.ts
@@ -0,0 +1,34 @@
+type MarginOptions = {
+    all?: number
+    left?: number
+    right?: number
+    top?: number
+    bottom?: number
+}
+
+export type MarginStyle = {
+    top: number
+    bottom: number
+    left: number
+    right: number
+}
+
+export const margin_style = (options: MarginOptions): MarginStyle => {
+    const { all, top, bottom, left, right } = options
+
+    if (all !== undefined) return {
+        top: all,
+        bottom: all,
+        left: all,
+        right: all
+    }
+
+    if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Margin must have at least one value")
+
+    return {
+        top: top || 0,
+        bottom: bottom || 0,
+        left: left || 0,
+        right: right || 0
+    }
+}
diff --git a/styles/src/component/padding.ts b/styles/src/component/padding.ts
new file mode 100644
index 0000000000000000000000000000000000000000..96792bf7661263d39e058310c836c2e34aae5378
--- /dev/null
+++ b/styles/src/component/padding.ts
@@ -0,0 +1,34 @@
+type PaddingOptions = {
+    all?: number
+    left?: number
+    right?: number
+    top?: number
+    bottom?: number
+}
+
+export type PaddingStyle = {
+    top: number
+    bottom: number
+    left: number
+    right: number
+}
+
+export const padding_style = (options: PaddingOptions): PaddingStyle => {
+    const { all, top, bottom, left, right } = options
+
+    if (all !== undefined) return {
+        top: all,
+        bottom: all,
+        left: all,
+        right: all
+    }
+
+    if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Padding must have at least one value")
+
+    return {
+        top: top || 0,
+        bottom: bottom || 0,
+        left: left || 0,
+        right: right || 0
+    }
+}