Margin

Spacing

ResponsiveSizes

Utilities for controlling an element's margin.

Class	Properties	Value
ob-m-0	margin: var(--ob-size-0)	0px
ob-mx-0	margin-left: var(--ob-size-0); margin-right: var(--ob-size-0)	0px
ob-my-0	margin-top: var(--ob-size-0); margin-bottom: var(--ob-size-0)	0px
ob-mr-0	margin-right: var(--ob-size-0)	0px
ob-mb-0	margin-bottom: var(--ob-size-0)	0px
ob-mt-0	margin-top: var(--ob-size-0)	0px
ob-ml-0	margin-left: var(--ob-size-0)	0px
ob-m-px	margin: var(--ob-size-px)	1px
ob-mx-px	margin-left: var(--ob-size-px); margin-right: var(--ob-size-px)	1px
ob-my-px	margin-top: var(--ob-size-px); margin-bottom: var(--ob-size-px)	1px
ob-mr-px	margin-right: var(--ob-size-px)	1px
ob-mb-px	margin-bottom: var(--ob-size-px)	1px
ob-mt-px	margin-top: var(--ob-size-px)	1px
ob-ml-px	margin-left: var(--ob-size-px)	1px
ob-m-0-5	margin: var(--ob-size-0-5)	2px
ob-mx-0-5	margin-left: var(--ob-size-0-5); margin-right: var(--ob-size-0-5)	2px
ob-my-0-5	margin-top: var(--ob-size-0-5); margin-bottom: var(--ob-size-0-5)	2px
ob-mr-0-5	margin-right: var(--ob-size-0-5)	2px
ob-mb-0-5	margin-bottom: var(--ob-size-0-5)	2px
ob-mt-0-5	margin-top: var(--ob-size-0-5)	2px
ob-ml-0-5	margin-left: var(--ob-size-0-5)	2px
ob-m-1	margin: var(--ob-size-1)	4px
ob-mx-1	margin-left: var(--ob-size-1); margin-right: var(--ob-size-1)	4px
ob-my-1	margin-top: var(--ob-size-1); margin-bottom: var(--ob-size-1)	4px
ob-mr-1	margin-right: var(--ob-size-1)	4px
ob-mb-1	margin-bottom: var(--ob-size-1)	4px
ob-mt-1	margin-top: var(--ob-size-1)	4px
ob-ml-1	margin-left: var(--ob-size-1)	4px
ob-m-1-5	margin: var(--ob-size-1-5)	6px
ob-mx-1-5	margin-left: var(--ob-size-1-5); margin-right: var(--ob-size-1-5)	6px
ob-my-1-5	margin-top: var(--ob-size-1-5); margin-bottom: var(--ob-size-1-5)	6px
ob-mr-1-5	margin-right: var(--ob-size-1-5)	6px
ob-mb-1-5	margin-bottom: var(--ob-size-1-5)	6px
ob-mt-1-5	margin-top: var(--ob-size-1-5)	6px
ob-ml-1-5	margin-left: var(--ob-size-1-5)	6px
ob-m-2	margin: var(--ob-size-2)	8px
ob-mx-2	margin-left: var(--ob-size-2); margin-right: var(--ob-size-2)	8px
ob-my-2	margin-top: var(--ob-size-2); margin-bottom: var(--ob-size-2)	8px
ob-mr-2	margin-right: var(--ob-size-2)	8px
ob-mb-2	margin-bottom: var(--ob-size-2)	8px
ob-mt-2	margin-top: var(--ob-size-2)	8px
ob-ml-2	margin-left: var(--ob-size-2)	8px
ob-m-2-5	margin: var(--ob-size-2-5)	10px
ob-mx-2-5	margin-left: var(--ob-size-2-5); margin-right: var(--ob-size-2-5)	10px
ob-my-2-5	margin-top: var(--ob-size-2-5); margin-bottom: var(--ob-size-2-5)	10px
ob-mr-2-5	margin-right: var(--ob-size-2-5)	10px
ob-mb-2-5	margin-bottom: var(--ob-size-2-5)	10px
ob-mt-2-5	margin-top: var(--ob-size-2-5)	10px
ob-ml-2-5	margin-left: var(--ob-size-2-5)	10px
ob-m-3	margin: var(--ob-size-3)	12px
ob-mx-3	margin-left: var(--ob-size-3); margin-right: var(--ob-size-3)	12px
ob-my-3	margin-top: var(--ob-size-3); margin-bottom: var(--ob-size-3)	12px
ob-mr-3	margin-right: var(--ob-size-3)	12px
ob-mb-3	margin-bottom: var(--ob-size-3)	12px
ob-mt-3	margin-top: var(--ob-size-3)	12px
ob-ml-3	margin-left: var(--ob-size-3)	12px
ob-m-3-5	margin: var(--ob-size-3-5)	14px
ob-mx-3-5	margin-left: var(--ob-size-3-5); margin-right: var(--ob-size-3-5)	14px
ob-my-3-5	margin-top: var(--ob-size-3-5); margin-bottom: var(--ob-size-3-5)	14px
ob-mr-3-5	margin-right: var(--ob-size-3-5)	14px
ob-mb-3-5	margin-bottom: var(--ob-size-3-5)	14px
ob-mt-3-5	margin-top: var(--ob-size-3-5)	14px
ob-ml-3-5	margin-left: var(--ob-size-3-5)	14px
ob-m-4	margin: var(--ob-size-4)	16px
ob-mx-4	margin-left: var(--ob-size-4); margin-right: var(--ob-size-4)	16px
ob-my-4	margin-top: var(--ob-size-4); margin-bottom: var(--ob-size-4)	16px
ob-mr-4	margin-right: var(--ob-size-4)	16px
ob-mb-4	margin-bottom: var(--ob-size-4)	16px
ob-mt-4	margin-top: var(--ob-size-4)	16px
ob-ml-4	margin-left: var(--ob-size-4)	16px
ob-m-5	margin: var(--ob-size-5)	20px
ob-mx-5	margin-left: var(--ob-size-5); margin-right: var(--ob-size-5)	20px
ob-my-5	margin-top: var(--ob-size-5); margin-bottom: var(--ob-size-5)	20px
ob-mr-5	margin-right: var(--ob-size-5)	20px
ob-mb-5	margin-bottom: var(--ob-size-5)	20px
ob-mt-5	margin-top: var(--ob-size-5)	20px
ob-ml-5	margin-left: var(--ob-size-5)	20px
ob-m-6	margin: var(--ob-size-6)	24px
ob-mx-6	margin-left: var(--ob-size-6); margin-right: var(--ob-size-6)	24px
ob-my-6	margin-top: var(--ob-size-6); margin-bottom: var(--ob-size-6)	24px
ob-mr-6	margin-right: var(--ob-size-6)	24px
ob-mb-6	margin-bottom: var(--ob-size-6)	24px
ob-mt-6	margin-top: var(--ob-size-6)	24px
ob-ml-6	margin-left: var(--ob-size-6)	24px
ob-m-7	margin: var(--ob-size-7)	28px
ob-mx-7	margin-left: var(--ob-size-7); margin-right: var(--ob-size-7)	28px
ob-my-7	margin-top: var(--ob-size-7); margin-bottom: var(--ob-size-7)	28px
ob-mr-7	margin-right: var(--ob-size-7)	28px
ob-mb-7	margin-bottom: var(--ob-size-7)	28px
ob-mt-7	margin-top: var(--ob-size-7)	28px
ob-ml-7	margin-left: var(--ob-size-7)	28px
ob-m-8	margin: var(--ob-size-8)	32px
ob-mx-8	margin-left: var(--ob-size-8); margin-right: var(--ob-size-8)	32px
ob-my-8	margin-top: var(--ob-size-8); margin-bottom: var(--ob-size-8)	32px
ob-mr-8	margin-right: var(--ob-size-8)	32px
ob-mb-8	margin-bottom: var(--ob-size-8)	32px
ob-mt-8	margin-top: var(--ob-size-8)	32px
ob-ml-8	margin-left: var(--ob-size-8)	32px
ob-m-9	margin: var(--ob-size-9)	36px
ob-mx-9	margin-left: var(--ob-size-9); margin-right: var(--ob-size-9)	36px
ob-my-9	margin-top: var(--ob-size-9); margin-bottom: var(--ob-size-9)	36px
ob-mr-9	margin-right: var(--ob-size-9)	36px
ob-mb-9	margin-bottom: var(--ob-size-9)	36px
ob-mt-9	margin-top: var(--ob-size-9)	36px
ob-ml-9	margin-left: var(--ob-size-9)	36px
ob-m-10	margin: var(--ob-size-10)	40px
ob-mx-10	margin-left: var(--ob-size-10); margin-right: var(--ob-size-10)	40px
ob-my-10	margin-top: var(--ob-size-10); margin-bottom: var(--ob-size-10)	40px
ob-mr-10	margin-right: var(--ob-size-10)	40px
ob-mb-10	margin-bottom: var(--ob-size-10)	40px
ob-mt-10	margin-top: var(--ob-size-10)	40px
ob-ml-10	margin-left: var(--ob-size-10)	40px
ob-m-11	margin: var(--ob-size-11)	44px
ob-mx-11	margin-left: var(--ob-size-11); margin-right: var(--ob-size-11)	44px
ob-my-11	margin-top: var(--ob-size-11); margin-bottom: var(--ob-size-11)	44px
ob-mr-11	margin-right: var(--ob-size-11)	44px
ob-mb-11	margin-bottom: var(--ob-size-11)	44px
ob-mt-11	margin-top: var(--ob-size-11)	44px
ob-ml-11	margin-left: var(--ob-size-11)	44px
ob-m-12	margin: var(--ob-size-12)	48px
ob-mx-12	margin-left: var(--ob-size-12); margin-right: var(--ob-size-12)	48px
ob-my-12	margin-top: var(--ob-size-12); margin-bottom: var(--ob-size-12)	48px
ob-mr-12	margin-right: var(--ob-size-12)	48px
ob-mb-12	margin-bottom: var(--ob-size-12)	48px
ob-mt-12	margin-top: var(--ob-size-12)	48px
ob-ml-12	margin-left: var(--ob-size-12)	48px
ob-m-14	margin: var(--ob-size-14)	56px
ob-mx-14	margin-left: var(--ob-size-14); margin-right: var(--ob-size-14)	56px
ob-my-14	margin-top: var(--ob-size-14); margin-bottom: var(--ob-size-14)	56px
ob-mr-14	margin-right: var(--ob-size-14)	56px
ob-mb-14	margin-bottom: var(--ob-size-14)	56px
ob-mt-14	margin-top: var(--ob-size-14)	56px
ob-ml-14	margin-left: var(--ob-size-14)	56px
ob-m-16	margin: var(--ob-size-16)	64px
ob-mx-16	margin-left: var(--ob-size-16); margin-right: var(--ob-size-16)	64px
ob-my-16	margin-top: var(--ob-size-16); margin-bottom: var(--ob-size-16)	64px
ob-mr-16	margin-right: var(--ob-size-16)	64px
ob-mb-16	margin-bottom: var(--ob-size-16)	64px
ob-mt-16	margin-top: var(--ob-size-16)	64px
ob-ml-16	margin-left: var(--ob-size-16)	64px
ob-m-20	margin: var(--ob-size-20)	80px
ob-mx-20	margin-left: var(--ob-size-20); margin-right: var(--ob-size-20)	80px
ob-my-20	margin-top: var(--ob-size-20); margin-bottom: var(--ob-size-20)	80px
ob-mr-20	margin-right: var(--ob-size-20)	80px
ob-mb-20	margin-bottom: var(--ob-size-20)	80px
ob-mt-20	margin-top: var(--ob-size-20)	80px
ob-ml-20	margin-left: var(--ob-size-20)	80px
ob-m-24	margin: var(--ob-size-24)	96px
ob-mx-24	margin-left: var(--ob-size-24); margin-right: var(--ob-size-24)	96px
ob-my-24	margin-top: var(--ob-size-24); margin-bottom: var(--ob-size-24)	96px
ob-mr-24	margin-right: var(--ob-size-24)	96px
ob-mb-24	margin-bottom: var(--ob-size-24)	96px
ob-mt-24	margin-top: var(--ob-size-24)	96px
ob-ml-24	margin-left: var(--ob-size-24)	96px
ob-m-28	margin: var(--ob-size-28)	112px
ob-mx-28	margin-left: var(--ob-size-28); margin-right: var(--ob-size-28)	112px
ob-my-28	margin-top: var(--ob-size-28); margin-bottom: var(--ob-size-28)	112px
ob-mr-28	margin-right: var(--ob-size-28)	112px
ob-mb-28	margin-bottom: var(--ob-size-28)	112px
ob-mt-28	margin-top: var(--ob-size-28)	112px
ob-ml-28	margin-left: var(--ob-size-28)	112px
ob-m-32	margin: var(--ob-size-32)	128px
ob-mx-32	margin-left: var(--ob-size-32); margin-right: var(--ob-size-32)	128px
ob-my-32	margin-top: var(--ob-size-32); margin-bottom: var(--ob-size-32)	128px
ob-mr-32	margin-right: var(--ob-size-32)	128px
ob-mb-32	margin-bottom: var(--ob-size-32)	128px
ob-mt-32	margin-top: var(--ob-size-32)	128px
ob-ml-32	margin-left: var(--ob-size-32)	128px
ob-m-36	margin: var(--ob-size-36)	144px
ob-mx-36	margin-left: var(--ob-size-36); margin-right: var(--ob-size-36)	144px
ob-my-36	margin-top: var(--ob-size-36); margin-bottom: var(--ob-size-36)	144px
ob-mr-36	margin-right: var(--ob-size-36)	144px
ob-mb-36	margin-bottom: var(--ob-size-36)	144px
ob-mt-36	margin-top: var(--ob-size-36)	144px
ob-ml-36	margin-left: var(--ob-size-36)	144px
ob-m-40	margin: var(--ob-size-40)	160px
ob-mx-40	margin-left: var(--ob-size-40); margin-right: var(--ob-size-40)	160px
ob-my-40	margin-top: var(--ob-size-40); margin-bottom: var(--ob-size-40)	160px
ob-mr-40	margin-right: var(--ob-size-40)	160px
ob-mb-40	margin-bottom: var(--ob-size-40)	160px
ob-mt-40	margin-top: var(--ob-size-40)	160px
ob-ml-40	margin-left: var(--ob-size-40)	160px
ob-m-44	margin: var(--ob-size-44)	176px
ob-mx-44	margin-left: var(--ob-size-44); margin-right: var(--ob-size-44)	176px
ob-my-44	margin-top: var(--ob-size-44); margin-bottom: var(--ob-size-44)	176px
ob-mr-44	margin-right: var(--ob-size-44)	176px
ob-mb-44	margin-bottom: var(--ob-size-44)	176px
ob-mt-44	margin-top: var(--ob-size-44)	176px
ob-ml-44	margin-left: var(--ob-size-44)	176px
ob-m-48	margin: var(--ob-size-48)	192px
ob-mx-48	margin-left: var(--ob-size-48); margin-right: var(--ob-size-48)	192px
ob-my-48	margin-top: var(--ob-size-48); margin-bottom: var(--ob-size-48)	192px
ob-mr-48	margin-right: var(--ob-size-48)	192px
ob-mb-48	margin-bottom: var(--ob-size-48)	192px
ob-mt-48	margin-top: var(--ob-size-48)	192px
ob-ml-48	margin-left: var(--ob-size-48)	192px
ob-m-52	margin: var(--ob-size-52)	208px
ob-mx-52	margin-left: var(--ob-size-52); margin-right: var(--ob-size-52)	208px
ob-my-52	margin-top: var(--ob-size-52); margin-bottom: var(--ob-size-52)	208px
ob-mr-52	margin-right: var(--ob-size-52)	208px
ob-mb-52	margin-bottom: var(--ob-size-52)	208px
ob-mt-52	margin-top: var(--ob-size-52)	208px
ob-ml-52	margin-left: var(--ob-size-52)	208px
ob-m-56	margin: var(--ob-size-56)	224px
ob-mx-56	margin-left: var(--ob-size-56); margin-right: var(--ob-size-56)	224px
ob-my-56	margin-top: var(--ob-size-56); margin-bottom: var(--ob-size-56)	224px
ob-mr-56	margin-right: var(--ob-size-56)	224px
ob-mb-56	margin-bottom: var(--ob-size-56)	224px
ob-mt-56	margin-top: var(--ob-size-56)	224px
ob-ml-56	margin-left: var(--ob-size-56)	224px
ob-m-60	margin: var(--ob-size-60)	240px
ob-mx-60	margin-left: var(--ob-size-60); margin-right: var(--ob-size-60)	240px
ob-my-60	margin-top: var(--ob-size-60); margin-bottom: var(--ob-size-60)	240px
ob-mr-60	margin-right: var(--ob-size-60)	240px
ob-mb-60	margin-bottom: var(--ob-size-60)	240px
ob-mt-60	margin-top: var(--ob-size-60)	240px
ob-ml-60	margin-left: var(--ob-size-60)	240px
ob-m-64	margin: var(--ob-size-64)	256px
ob-mx-64	margin-left: var(--ob-size-64); margin-right: var(--ob-size-64)	256px
ob-my-64	margin-top: var(--ob-size-64); margin-bottom: var(--ob-size-64)	256px
ob-mr-64	margin-right: var(--ob-size-64)	256px
ob-mb-64	margin-bottom: var(--ob-size-64)	256px
ob-mt-64	margin-top: var(--ob-size-64)	256px
ob-ml-64	margin-left: var(--ob-size-64)	256px
ob-m-72	margin: var(--ob-size-72)	288px
ob-mx-72	margin-left: var(--ob-size-72); margin-right: var(--ob-size-72)	288px
ob-my-72	margin-top: var(--ob-size-72); margin-bottom: var(--ob-size-72)	288px
ob-mr-72	margin-right: var(--ob-size-72)	288px
ob-mb-72	margin-bottom: var(--ob-size-72)	288px
ob-mt-72	margin-top: var(--ob-size-72)	288px
ob-ml-72	margin-left: var(--ob-size-72)	288px
ob-m-80	margin: var(--ob-size-80)	320px
ob-mx-80	margin-left: var(--ob-size-80); margin-right: var(--ob-size-80)	320px
ob-my-80	margin-top: var(--ob-size-80); margin-bottom: var(--ob-size-80)	320px
ob-mr-80	margin-right: var(--ob-size-80)	320px
ob-mb-80	margin-bottom: var(--ob-size-80)	320px
ob-mt-80	margin-top: var(--ob-size-80)	320px
ob-ml-80	margin-left: var(--ob-size-80)	320px
ob-m-96	margin: var(--ob-size-96)	384px
ob-mx-96	margin-left: var(--ob-size-96); margin-right: var(--ob-size-96)	384px
ob-my-96	margin-top: var(--ob-size-96); margin-bottom: var(--ob-size-96)	384px
ob-mr-96	margin-right: var(--ob-size-96)	384px
ob-mb-96	margin-bottom: var(--ob-size-96)	384px
ob-mt-96	margin-top: var(--ob-size-96)	384px
ob-ml-96	margin-left: var(--ob-size-96)	384px