Skip to main content

Margin

Spacing

Utilities for controlling an element's margin.

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