Skip to main content

Space Between

Spacing
ResponsiveSizes

Utilities for controlling the space between child elements.

ClassPropertiesValue
ob-space-x-0 > * + *margin-left: var(--ob-size-0)0px
ob-space-y-0 > * + *margin-top: var(--ob-size-0)0px
ob-space-x-px > * + *margin-left: var(--ob-size-px)1px
ob-space-y-px > * + *margin-top: var(--ob-size-px)1px
ob-space-x-0-5 > * + *margin-left: var(--ob-size-0-5)2px
ob-space-y-0-5 > * + *margin-top: var(--ob-size-0-5)2px
ob-space-x-1 > * + *margin-left: var(--ob-size-1)4px
ob-space-y-1 > * + *margin-top: var(--ob-size-1)4px
ob-space-x-1-5 > * + *margin-left: var(--ob-size-1-5)6px
ob-space-y-1-5 > * + *margin-top: var(--ob-size-1-5)6px
ob-space-x-2 > * + *margin-left: var(--ob-size-2)8px
ob-space-y-2 > * + *margin-top: var(--ob-size-2)8px
ob-space-x-2-5 > * + *margin-left: var(--ob-size-2-5)10px
ob-space-y-2-5 > * + *margin-top: var(--ob-size-2-5)10px
ob-space-x-3 > * + *margin-left: var(--ob-size-3)12px
ob-space-y-3 > * + *margin-top: var(--ob-size-3)12px
ob-space-x-3-5 > * + *margin-left: var(--ob-size-3-5)14px
ob-space-y-3-5 > * + *margin-top: var(--ob-size-3-5)14px
ob-space-x-4 > * + *margin-left: var(--ob-size-4)16px
ob-space-y-4 > * + *margin-top: var(--ob-size-4)16px
ob-space-x-5 > * + *margin-left: var(--ob-size-5)20px
ob-space-y-5 > * + *margin-top: var(--ob-size-5)20px
ob-space-x-6 > * + *margin-left: var(--ob-size-6)24px
ob-space-y-6 > * + *margin-top: var(--ob-size-6)24px
ob-space-x-7 > * + *margin-left: var(--ob-size-7)28px
ob-space-y-7 > * + *margin-top: var(--ob-size-7)28px
ob-space-x-8 > * + *margin-left: var(--ob-size-8)32px
ob-space-y-8 > * + *margin-top: var(--ob-size-8)32px
ob-space-x-9 > * + *margin-left: var(--ob-size-9)36px
ob-space-y-9 > * + *margin-top: var(--ob-size-9)36px
ob-space-x-10 > * + *margin-left: var(--ob-size-10)40px
ob-space-y-10 > * + *margin-top: var(--ob-size-10)40px
ob-space-x-11 > * + *margin-left: var(--ob-size-11)44px
ob-space-y-11 > * + *margin-top: var(--ob-size-11)44px
ob-space-x-12 > * + *margin-left: var(--ob-size-12)48px
ob-space-y-12 > * + *margin-top: var(--ob-size-12)48px
ob-space-x-14 > * + *margin-left: var(--ob-size-14)56px
ob-space-y-14 > * + *margin-top: var(--ob-size-14)56px
ob-space-x-16 > * + *margin-left: var(--ob-size-16)64px
ob-space-y-16 > * + *margin-top: var(--ob-size-16)64px
ob-space-x-20 > * + *margin-left: var(--ob-size-20)80px
ob-space-y-20 > * + *margin-top: var(--ob-size-20)80px
ob-space-x-24 > * + *margin-left: var(--ob-size-24)96px
ob-space-y-24 > * + *margin-top: var(--ob-size-24)96px
ob-space-x-28 > * + *margin-left: var(--ob-size-28)112px
ob-space-y-28 > * + *margin-top: var(--ob-size-28)112px
ob-space-x-32 > * + *margin-left: var(--ob-size-32)128px
ob-space-y-32 > * + *margin-top: var(--ob-size-32)128px
ob-space-x-36 > * + *margin-left: var(--ob-size-36)144px
ob-space-y-36 > * + *margin-top: var(--ob-size-36)144px
ob-space-x-40 > * + *margin-left: var(--ob-size-40)160px
ob-space-y-40 > * + *margin-top: var(--ob-size-40)160px
ob-space-x-44 > * + *margin-left: var(--ob-size-44)176px
ob-space-y-44 > * + *margin-top: var(--ob-size-44)176px
ob-space-x-48 > * + *margin-left: var(--ob-size-48)192px
ob-space-y-48 > * + *margin-top: var(--ob-size-48)192px
ob-space-x-52 > * + *margin-left: var(--ob-size-52)208px
ob-space-y-52 > * + *margin-top: var(--ob-size-52)208px
ob-space-x-56 > * + *margin-left: var(--ob-size-56)224px
ob-space-y-56 > * + *margin-top: var(--ob-size-56)224px
ob-space-x-60 > * + *margin-left: var(--ob-size-60)240px
ob-space-y-60 > * + *margin-top: var(--ob-size-60)240px
ob-space-x-64 > * + *margin-left: var(--ob-size-64)256px
ob-space-y-64 > * + *margin-top: var(--ob-size-64)256px
ob-space-x-72 > * + *margin-left: var(--ob-size-72)288px
ob-space-y-72 > * + *margin-top: var(--ob-size-72)288px
ob-space-x-80 > * + *margin-left: var(--ob-size-80)320px
ob-space-y-80 > * + *margin-top: var(--ob-size-80)320px
ob-space-x-96 > * + *margin-left: var(--ob-size-96)384px
ob-space-y-96 > * + *margin-top: var(--ob-size-96)384px