Skip to main content

Padding

Spacing

Utilities for controlling an element's padding.

ClassPropertiesValue
ob-p-0padding: var(--ob-size-0)0px
ob-px-0padding-left: var(--ob-size-0);
padding-right: var(--ob-size-0)
0px
ob-py-0padding-top: var(--ob-size-0);
padding-bottom: var(--ob-size-0)
0px
ob-pr-0padding-right: var(--ob-size-0)0px
ob-pb-0padding-bottom: var(--ob-size-0)0px
ob-pt-0padding-top: var(--ob-size-0)0px
ob-pl-0padding-left: var(--ob-size-0)0px
ob-p-pxpadding: var(--ob-size-px)1px
ob-px-pxpadding-left: var(--ob-size-px);
padding-right: var(--ob-size-px)
1px
ob-py-pxpadding-top: var(--ob-size-px);
padding-bottom: var(--ob-size-px)
1px
ob-pr-pxpadding-right: var(--ob-size-px)1px
ob-pb-pxpadding-bottom: var(--ob-size-px)1px
ob-pt-pxpadding-top: var(--ob-size-px)1px
ob-pl-pxpadding-left: var(--ob-size-px)1px
ob-p-0-5padding: var(--ob-size-0-5)2px
ob-px-0-5padding-left: var(--ob-size-0-5);
padding-right: var(--ob-size-0-5)
2px
ob-py-0-5padding-top: var(--ob-size-0-5);
padding-bottom: var(--ob-size-0-5)
2px
ob-pr-0-5padding-right: var(--ob-size-0-5)2px
ob-pb-0-5padding-bottom: var(--ob-size-0-5)2px
ob-pt-0-5padding-top: var(--ob-size-0-5)2px
ob-pl-0-5padding-left: var(--ob-size-0-5)2px
ob-p-1padding: var(--ob-size-1)4px
ob-px-1padding-left: var(--ob-size-1);
padding-right: var(--ob-size-1)
4px
ob-py-1padding-top: var(--ob-size-1);
padding-bottom: var(--ob-size-1)
4px
ob-pr-1padding-right: var(--ob-size-1)4px
ob-pb-1padding-bottom: var(--ob-size-1)4px
ob-pt-1padding-top: var(--ob-size-1)4px
ob-pl-1padding-left: var(--ob-size-1)4px
ob-p-1-5padding: var(--ob-size-1-5)6px
ob-px-1-5padding-left: var(--ob-size-1-5);
padding-right: var(--ob-size-1-5)
6px
ob-py-1-5padding-top: var(--ob-size-1-5);
padding-bottom: var(--ob-size-1-5)
6px
ob-pr-1-5padding-right: var(--ob-size-1-5)6px
ob-pb-1-5padding-bottom: var(--ob-size-1-5)6px
ob-pt-1-5padding-top: var(--ob-size-1-5)6px
ob-pl-1-5padding-left: var(--ob-size-1-5)6px
ob-p-2padding: var(--ob-size-2)8px
ob-px-2padding-left: var(--ob-size-2);
padding-right: var(--ob-size-2)
8px
ob-py-2padding-top: var(--ob-size-2);
padding-bottom: var(--ob-size-2)
8px
ob-pr-2padding-right: var(--ob-size-2)8px
ob-pb-2padding-bottom: var(--ob-size-2)8px
ob-pt-2padding-top: var(--ob-size-2)8px
ob-pl-2padding-left: var(--ob-size-2)8px
ob-p-2-5padding: var(--ob-size-2-5)10px
ob-px-2-5padding-left: var(--ob-size-2-5);
padding-right: var(--ob-size-2-5)
10px
ob-py-2-5padding-top: var(--ob-size-2-5);
padding-bottom: var(--ob-size-2-5)
10px
ob-pr-2-5padding-right: var(--ob-size-2-5)10px
ob-pb-2-5padding-bottom: var(--ob-size-2-5)10px
ob-pt-2-5padding-top: var(--ob-size-2-5)10px
ob-pl-2-5padding-left: var(--ob-size-2-5)10px
ob-p-3padding: var(--ob-size-3)12px
ob-px-3padding-left: var(--ob-size-3);
padding-right: var(--ob-size-3)
12px
ob-py-3padding-top: var(--ob-size-3);
padding-bottom: var(--ob-size-3)
12px
ob-pr-3padding-right: var(--ob-size-3)12px
ob-pb-3padding-bottom: var(--ob-size-3)12px
ob-pt-3padding-top: var(--ob-size-3)12px
ob-pl-3padding-left: var(--ob-size-3)12px
ob-p-3-5padding: var(--ob-size-3-5)14px
ob-px-3-5padding-left: var(--ob-size-3-5);
padding-right: var(--ob-size-3-5)
14px
ob-py-3-5padding-top: var(--ob-size-3-5);
padding-bottom: var(--ob-size-3-5)
14px
ob-pr-3-5padding-right: var(--ob-size-3-5)14px
ob-pb-3-5padding-bottom: var(--ob-size-3-5)14px
ob-pt-3-5padding-top: var(--ob-size-3-5)14px
ob-pl-3-5padding-left: var(--ob-size-3-5)14px
ob-p-4padding: var(--ob-size-4)16px
ob-px-4padding-left: var(--ob-size-4);
padding-right: var(--ob-size-4)
16px
ob-py-4padding-top: var(--ob-size-4);
padding-bottom: var(--ob-size-4)
16px
ob-pr-4padding-right: var(--ob-size-4)16px
ob-pb-4padding-bottom: var(--ob-size-4)16px
ob-pt-4padding-top: var(--ob-size-4)16px
ob-pl-4padding-left: var(--ob-size-4)16px
ob-p-5padding: var(--ob-size-5)20px
ob-px-5padding-left: var(--ob-size-5);
padding-right: var(--ob-size-5)
20px
ob-py-5padding-top: var(--ob-size-5);
padding-bottom: var(--ob-size-5)
20px
ob-pr-5padding-right: var(--ob-size-5)20px
ob-pb-5padding-bottom: var(--ob-size-5)20px
ob-pt-5padding-top: var(--ob-size-5)20px
ob-pl-5padding-left: var(--ob-size-5)20px
ob-p-6padding: var(--ob-size-6)24px
ob-px-6padding-left: var(--ob-size-6);
padding-right: var(--ob-size-6)
24px
ob-py-6padding-top: var(--ob-size-6);
padding-bottom: var(--ob-size-6)
24px
ob-pr-6padding-right: var(--ob-size-6)24px
ob-pb-6padding-bottom: var(--ob-size-6)24px
ob-pt-6padding-top: var(--ob-size-6)24px
ob-pl-6padding-left: var(--ob-size-6)24px
ob-p-7padding: var(--ob-size-7)28px
ob-px-7padding-left: var(--ob-size-7);
padding-right: var(--ob-size-7)
28px
ob-py-7padding-top: var(--ob-size-7);
padding-bottom: var(--ob-size-7)
28px
ob-pr-7padding-right: var(--ob-size-7)28px
ob-pb-7padding-bottom: var(--ob-size-7)28px
ob-pt-7padding-top: var(--ob-size-7)28px
ob-pl-7padding-left: var(--ob-size-7)28px
ob-p-8padding: var(--ob-size-8)32px
ob-px-8padding-left: var(--ob-size-8);
padding-right: var(--ob-size-8)
32px
ob-py-8padding-top: var(--ob-size-8);
padding-bottom: var(--ob-size-8)
32px
ob-pr-8padding-right: var(--ob-size-8)32px
ob-pb-8padding-bottom: var(--ob-size-8)32px
ob-pt-8padding-top: var(--ob-size-8)32px
ob-pl-8padding-left: var(--ob-size-8)32px
ob-p-9padding: var(--ob-size-9)36px
ob-px-9padding-left: var(--ob-size-9);
padding-right: var(--ob-size-9)
36px
ob-py-9padding-top: var(--ob-size-9);
padding-bottom: var(--ob-size-9)
36px
ob-pr-9padding-right: var(--ob-size-9)36px
ob-pb-9padding-bottom: var(--ob-size-9)36px
ob-pt-9padding-top: var(--ob-size-9)36px
ob-pl-9padding-left: var(--ob-size-9)36px
ob-p-10padding: var(--ob-size-10)40px
ob-px-10padding-left: var(--ob-size-10);
padding-right: var(--ob-size-10)
40px
ob-py-10padding-top: var(--ob-size-10);
padding-bottom: var(--ob-size-10)
40px
ob-pr-10padding-right: var(--ob-size-10)40px
ob-pb-10padding-bottom: var(--ob-size-10)40px
ob-pt-10padding-top: var(--ob-size-10)40px
ob-pl-10padding-left: var(--ob-size-10)40px
ob-p-11padding: var(--ob-size-11)44px
ob-px-11padding-left: var(--ob-size-11);
padding-right: var(--ob-size-11)
44px
ob-py-11padding-top: var(--ob-size-11);
padding-bottom: var(--ob-size-11)
44px
ob-pr-11padding-right: var(--ob-size-11)44px
ob-pb-11padding-bottom: var(--ob-size-11)44px
ob-pt-11padding-top: var(--ob-size-11)44px
ob-pl-11padding-left: var(--ob-size-11)44px
ob-p-12padding: var(--ob-size-12)48px
ob-px-12padding-left: var(--ob-size-12);
padding-right: var(--ob-size-12)
48px
ob-py-12padding-top: var(--ob-size-12);
padding-bottom: var(--ob-size-12)
48px
ob-pr-12padding-right: var(--ob-size-12)48px
ob-pb-12padding-bottom: var(--ob-size-12)48px
ob-pt-12padding-top: var(--ob-size-12)48px
ob-pl-12padding-left: var(--ob-size-12)48px
ob-p-14padding: var(--ob-size-14)56px
ob-px-14padding-left: var(--ob-size-14);
padding-right: var(--ob-size-14)
56px
ob-py-14padding-top: var(--ob-size-14);
padding-bottom: var(--ob-size-14)
56px
ob-pr-14padding-right: var(--ob-size-14)56px
ob-pb-14padding-bottom: var(--ob-size-14)56px
ob-pt-14padding-top: var(--ob-size-14)56px
ob-pl-14padding-left: var(--ob-size-14)56px
ob-p-16padding: var(--ob-size-16)64px
ob-px-16padding-left: var(--ob-size-16);
padding-right: var(--ob-size-16)
64px
ob-py-16padding-top: var(--ob-size-16);
padding-bottom: var(--ob-size-16)
64px
ob-pr-16padding-right: var(--ob-size-16)64px
ob-pb-16padding-bottom: var(--ob-size-16)64px
ob-pt-16padding-top: var(--ob-size-16)64px
ob-pl-16padding-left: var(--ob-size-16)64px
ob-p-20padding: var(--ob-size-20)80px
ob-px-20padding-left: var(--ob-size-20);
padding-right: var(--ob-size-20)
80px
ob-py-20padding-top: var(--ob-size-20);
padding-bottom: var(--ob-size-20)
80px
ob-pr-20padding-right: var(--ob-size-20)80px
ob-pb-20padding-bottom: var(--ob-size-20)80px
ob-pt-20padding-top: var(--ob-size-20)80px
ob-pl-20padding-left: var(--ob-size-20)80px
ob-p-24padding: var(--ob-size-24)96px
ob-px-24padding-left: var(--ob-size-24);
padding-right: var(--ob-size-24)
96px
ob-py-24padding-top: var(--ob-size-24);
padding-bottom: var(--ob-size-24)
96px
ob-pr-24padding-right: var(--ob-size-24)96px
ob-pb-24padding-bottom: var(--ob-size-24)96px
ob-pt-24padding-top: var(--ob-size-24)96px
ob-pl-24padding-left: var(--ob-size-24)96px
ob-p-28padding: var(--ob-size-28)112px
ob-px-28padding-left: var(--ob-size-28);
padding-right: var(--ob-size-28)
112px
ob-py-28padding-top: var(--ob-size-28);
padding-bottom: var(--ob-size-28)
112px
ob-pr-28padding-right: var(--ob-size-28)112px
ob-pb-28padding-bottom: var(--ob-size-28)112px
ob-pt-28padding-top: var(--ob-size-28)112px
ob-pl-28padding-left: var(--ob-size-28)112px
ob-p-32padding: var(--ob-size-32)128px
ob-px-32padding-left: var(--ob-size-32);
padding-right: var(--ob-size-32)
128px
ob-py-32padding-top: var(--ob-size-32);
padding-bottom: var(--ob-size-32)
128px
ob-pr-32padding-right: var(--ob-size-32)128px
ob-pb-32padding-bottom: var(--ob-size-32)128px
ob-pt-32padding-top: var(--ob-size-32)128px
ob-pl-32padding-left: var(--ob-size-32)128px
ob-p-36padding: var(--ob-size-36)144px
ob-px-36padding-left: var(--ob-size-36);
padding-right: var(--ob-size-36)
144px
ob-py-36padding-top: var(--ob-size-36);
padding-bottom: var(--ob-size-36)
144px
ob-pr-36padding-right: var(--ob-size-36)144px
ob-pb-36padding-bottom: var(--ob-size-36)144px
ob-pt-36padding-top: var(--ob-size-36)144px
ob-pl-36padding-left: var(--ob-size-36)144px
ob-p-40padding: var(--ob-size-40)160px
ob-px-40padding-left: var(--ob-size-40);
padding-right: var(--ob-size-40)
160px
ob-py-40padding-top: var(--ob-size-40);
padding-bottom: var(--ob-size-40)
160px
ob-pr-40padding-right: var(--ob-size-40)160px
ob-pb-40padding-bottom: var(--ob-size-40)160px
ob-pt-40padding-top: var(--ob-size-40)160px
ob-pl-40padding-left: var(--ob-size-40)160px
ob-p-44padding: var(--ob-size-44)176px
ob-px-44padding-left: var(--ob-size-44);
padding-right: var(--ob-size-44)
176px
ob-py-44padding-top: var(--ob-size-44);
padding-bottom: var(--ob-size-44)
176px
ob-pr-44padding-right: var(--ob-size-44)176px
ob-pb-44padding-bottom: var(--ob-size-44)176px
ob-pt-44padding-top: var(--ob-size-44)176px
ob-pl-44padding-left: var(--ob-size-44)176px
ob-p-48padding: var(--ob-size-48)192px
ob-px-48padding-left: var(--ob-size-48);
padding-right: var(--ob-size-48)
192px
ob-py-48padding-top: var(--ob-size-48);
padding-bottom: var(--ob-size-48)
192px
ob-pr-48padding-right: var(--ob-size-48)192px
ob-pb-48padding-bottom: var(--ob-size-48)192px
ob-pt-48padding-top: var(--ob-size-48)192px
ob-pl-48padding-left: var(--ob-size-48)192px
ob-p-52padding: var(--ob-size-52)208px
ob-px-52padding-left: var(--ob-size-52);
padding-right: var(--ob-size-52)
208px
ob-py-52padding-top: var(--ob-size-52);
padding-bottom: var(--ob-size-52)
208px
ob-pr-52padding-right: var(--ob-size-52)208px
ob-pb-52padding-bottom: var(--ob-size-52)208px
ob-pt-52padding-top: var(--ob-size-52)208px
ob-pl-52padding-left: var(--ob-size-52)208px
ob-p-56padding: var(--ob-size-56)224px
ob-px-56padding-left: var(--ob-size-56);
padding-right: var(--ob-size-56)
224px
ob-py-56padding-top: var(--ob-size-56);
padding-bottom: var(--ob-size-56)
224px
ob-pr-56padding-right: var(--ob-size-56)224px
ob-pb-56padding-bottom: var(--ob-size-56)224px
ob-pt-56padding-top: var(--ob-size-56)224px
ob-pl-56padding-left: var(--ob-size-56)224px
ob-p-60padding: var(--ob-size-60)240px
ob-px-60padding-left: var(--ob-size-60);
padding-right: var(--ob-size-60)
240px
ob-py-60padding-top: var(--ob-size-60);
padding-bottom: var(--ob-size-60)
240px
ob-pr-60padding-right: var(--ob-size-60)240px
ob-pb-60padding-bottom: var(--ob-size-60)240px
ob-pt-60padding-top: var(--ob-size-60)240px
ob-pl-60padding-left: var(--ob-size-60)240px
ob-p-64padding: var(--ob-size-64)256px
ob-px-64padding-left: var(--ob-size-64);
padding-right: var(--ob-size-64)
256px
ob-py-64padding-top: var(--ob-size-64);
padding-bottom: var(--ob-size-64)
256px
ob-pr-64padding-right: var(--ob-size-64)256px
ob-pb-64padding-bottom: var(--ob-size-64)256px
ob-pt-64padding-top: var(--ob-size-64)256px
ob-pl-64padding-left: var(--ob-size-64)256px
ob-p-72padding: var(--ob-size-72)288px
ob-px-72padding-left: var(--ob-size-72);
padding-right: var(--ob-size-72)
288px
ob-py-72padding-top: var(--ob-size-72);
padding-bottom: var(--ob-size-72)
288px
ob-pr-72padding-right: var(--ob-size-72)288px
ob-pb-72padding-bottom: var(--ob-size-72)288px
ob-pt-72padding-top: var(--ob-size-72)288px
ob-pl-72padding-left: var(--ob-size-72)288px
ob-p-80padding: var(--ob-size-80)320px
ob-px-80padding-left: var(--ob-size-80);
padding-right: var(--ob-size-80)
320px
ob-py-80padding-top: var(--ob-size-80);
padding-bottom: var(--ob-size-80)
320px
ob-pr-80padding-right: var(--ob-size-80)320px
ob-pb-80padding-bottom: var(--ob-size-80)320px
ob-pt-80padding-top: var(--ob-size-80)320px
ob-pl-80padding-left: var(--ob-size-80)320px
ob-p-96padding: var(--ob-size-96)384px
ob-px-96padding-left: var(--ob-size-96);
padding-right: var(--ob-size-96)
384px
ob-py-96padding-top: var(--ob-size-96);
padding-bottom: var(--ob-size-96)
384px
ob-pr-96padding-right: var(--ob-size-96)384px
ob-pb-96padding-bottom: var(--ob-size-96)384px
ob-pt-96padding-top: var(--ob-size-96)384px
ob-pl-96padding-left: var(--ob-size-96)384px