Padding

Spacing

ResponsiveSizes

Utilities for controlling an element's padding.

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