Utilities

Spacing utilities

Margin, padding and gap classes generated from the space scale.

Spacing utilities are generated from the space scale: m/p for all sides, t r b l for one side, x y for the inline or block axis, and gap, gap-x, gap-y.

Example

ct-p-4ct-p-8ct-p-16

Classes

221 classes from platforms/web/utilities/generated.css.

Class	Declarations
`.ct-m-0`	`margin:var(--space-0)`
`.ct-mt-0`	`margin-top:var(--space-0)`
`.ct-mr-0`	`margin-right:var(--space-0)`
`.ct-mb-0`	`margin-bottom:var(--space-0)`
`.ct-ml-0`	`margin-left:var(--space-0)`
`.ct-mx-0`	`margin-inline:var(--space-0)`
`.ct-my-0`	`margin-block:var(--space-0)`
`.ct-p-0`	`padding:var(--space-0)`
`.ct-pt-0`	`padding-top:var(--space-0)`
`.ct-pr-0`	`padding-right:var(--space-0)`
`.ct-pb-0`	`padding-bottom:var(--space-0)`
`.ct-pl-0`	`padding-left:var(--space-0)`
`.ct-px-0`	`padding-inline:var(--space-0)`
`.ct-py-0`	`padding-block:var(--space-0)`
`.ct-gap-0`	`gap:var(--space-0)`
`.ct-gap-x-0`	`column-gap:var(--space-0)`
`.ct-gap-y-0`	`row-gap:var(--space-0)`
`.ct-m-2`	`margin:var(--space-2)`
`.ct-mt-2`	`margin-top:var(--space-2)`
`.ct-mr-2`	`margin-right:var(--space-2)`
`.ct-mb-2`	`margin-bottom:var(--space-2)`
`.ct-ml-2`	`margin-left:var(--space-2)`
`.ct-mx-2`	`margin-inline:var(--space-2)`
`.ct-my-2`	`margin-block:var(--space-2)`
`.ct-p-2`	`padding:var(--space-2)`
`.ct-pt-2`	`padding-top:var(--space-2)`
`.ct-pr-2`	`padding-right:var(--space-2)`
`.ct-pb-2`	`padding-bottom:var(--space-2)`
`.ct-pl-2`	`padding-left:var(--space-2)`
`.ct-px-2`	`padding-inline:var(--space-2)`
`.ct-py-2`	`padding-block:var(--space-2)`
`.ct-gap-2`	`gap:var(--space-2)`
`.ct-gap-x-2`	`column-gap:var(--space-2)`
`.ct-gap-y-2`	`row-gap:var(--space-2)`
`.ct-m-4`	`margin:var(--space-4)`
`.ct-mt-4`	`margin-top:var(--space-4)`
`.ct-mr-4`	`margin-right:var(--space-4)`
`.ct-mb-4`	`margin-bottom:var(--space-4)`
`.ct-ml-4`	`margin-left:var(--space-4)`
`.ct-mx-4`	`margin-inline:var(--space-4)`
`.ct-my-4`	`margin-block:var(--space-4)`
`.ct-p-4`	`padding:var(--space-4)`
`.ct-pt-4`	`padding-top:var(--space-4)`
`.ct-pr-4`	`padding-right:var(--space-4)`
`.ct-pb-4`	`padding-bottom:var(--space-4)`
`.ct-pl-4`	`padding-left:var(--space-4)`
`.ct-px-4`	`padding-inline:var(--space-4)`
`.ct-py-4`	`padding-block:var(--space-4)`
`.ct-gap-4`	`gap:var(--space-4)`
`.ct-gap-x-4`	`column-gap:var(--space-4)`
`.ct-gap-y-4`	`row-gap:var(--space-4)`
`.ct-m-6`	`margin:var(--space-6)`
`.ct-mt-6`	`margin-top:var(--space-6)`
`.ct-mr-6`	`margin-right:var(--space-6)`
`.ct-mb-6`	`margin-bottom:var(--space-6)`
`.ct-ml-6`	`margin-left:var(--space-6)`
`.ct-mx-6`	`margin-inline:var(--space-6)`
`.ct-my-6`	`margin-block:var(--space-6)`
`.ct-p-6`	`padding:var(--space-6)`
`.ct-pt-6`	`padding-top:var(--space-6)`
`.ct-pr-6`	`padding-right:var(--space-6)`
`.ct-pb-6`	`padding-bottom:var(--space-6)`
`.ct-pl-6`	`padding-left:var(--space-6)`
`.ct-px-6`	`padding-inline:var(--space-6)`
`.ct-py-6`	`padding-block:var(--space-6)`
`.ct-gap-6`	`gap:var(--space-6)`
`.ct-gap-x-6`	`column-gap:var(--space-6)`
`.ct-gap-y-6`	`row-gap:var(--space-6)`
`.ct-m-8`	`margin:var(--space-8)`
`.ct-mt-8`	`margin-top:var(--space-8)`
`.ct-mr-8`	`margin-right:var(--space-8)`
`.ct-mb-8`	`margin-bottom:var(--space-8)`
`.ct-ml-8`	`margin-left:var(--space-8)`
`.ct-mx-8`	`margin-inline:var(--space-8)`
`.ct-my-8`	`margin-block:var(--space-8)`
`.ct-p-8`	`padding:var(--space-8)`
`.ct-pt-8`	`padding-top:var(--space-8)`
`.ct-pr-8`	`padding-right:var(--space-8)`
`.ct-pb-8`	`padding-bottom:var(--space-8)`
`.ct-pl-8`	`padding-left:var(--space-8)`
`.ct-px-8`	`padding-inline:var(--space-8)`
`.ct-py-8`	`padding-block:var(--space-8)`
`.ct-gap-8`	`gap:var(--space-8)`
`.ct-gap-x-8`	`column-gap:var(--space-8)`
`.ct-gap-y-8`	`row-gap:var(--space-8)`
`.ct-m-10`	`margin:var(--space-10)`
`.ct-mt-10`	`margin-top:var(--space-10)`
`.ct-mr-10`	`margin-right:var(--space-10)`
`.ct-mb-10`	`margin-bottom:var(--space-10)`
`.ct-ml-10`	`margin-left:var(--space-10)`
`.ct-mx-10`	`margin-inline:var(--space-10)`
`.ct-my-10`	`margin-block:var(--space-10)`
`.ct-p-10`	`padding:var(--space-10)`
`.ct-pt-10`	`padding-top:var(--space-10)`
`.ct-pr-10`	`padding-right:var(--space-10)`
`.ct-pb-10`	`padding-bottom:var(--space-10)`
`.ct-pl-10`	`padding-left:var(--space-10)`
`.ct-px-10`	`padding-inline:var(--space-10)`
`.ct-py-10`	`padding-block:var(--space-10)`
`.ct-gap-10`	`gap:var(--space-10)`
`.ct-gap-x-10`	`column-gap:var(--space-10)`
`.ct-gap-y-10`	`row-gap:var(--space-10)`
`.ct-m-12`	`margin:var(--space-12)`
`.ct-mt-12`	`margin-top:var(--space-12)`
`.ct-mr-12`	`margin-right:var(--space-12)`
`.ct-mb-12`	`margin-bottom:var(--space-12)`
`.ct-ml-12`	`margin-left:var(--space-12)`
`.ct-mx-12`	`margin-inline:var(--space-12)`
`.ct-my-12`	`margin-block:var(--space-12)`
`.ct-p-12`	`padding:var(--space-12)`
`.ct-pt-12`	`padding-top:var(--space-12)`
`.ct-pr-12`	`padding-right:var(--space-12)`
`.ct-pb-12`	`padding-bottom:var(--space-12)`
`.ct-pl-12`	`padding-left:var(--space-12)`
`.ct-px-12`	`padding-inline:var(--space-12)`
`.ct-py-12`	`padding-block:var(--space-12)`
`.ct-gap-12`	`gap:var(--space-12)`
`.ct-gap-x-12`	`column-gap:var(--space-12)`
`.ct-gap-y-12`	`row-gap:var(--space-12)`
`.ct-m-14`	`margin:var(--space-14)`
`.ct-mt-14`	`margin-top:var(--space-14)`
`.ct-mr-14`	`margin-right:var(--space-14)`
`.ct-mb-14`	`margin-bottom:var(--space-14)`
`.ct-ml-14`	`margin-left:var(--space-14)`
`.ct-mx-14`	`margin-inline:var(--space-14)`
`.ct-my-14`	`margin-block:var(--space-14)`
`.ct-p-14`	`padding:var(--space-14)`
`.ct-pt-14`	`padding-top:var(--space-14)`
`.ct-pr-14`	`padding-right:var(--space-14)`
`.ct-pb-14`	`padding-bottom:var(--space-14)`
`.ct-pl-14`	`padding-left:var(--space-14)`
`.ct-px-14`	`padding-inline:var(--space-14)`
`.ct-py-14`	`padding-block:var(--space-14)`
`.ct-gap-14`	`gap:var(--space-14)`
`.ct-gap-x-14`	`column-gap:var(--space-14)`
`.ct-gap-y-14`	`row-gap:var(--space-14)`
`.ct-m-16`	`margin:var(--space-16)`
`.ct-mt-16`	`margin-top:var(--space-16)`
`.ct-mr-16`	`margin-right:var(--space-16)`
`.ct-mb-16`	`margin-bottom:var(--space-16)`
`.ct-ml-16`	`margin-left:var(--space-16)`
`.ct-mx-16`	`margin-inline:var(--space-16)`
`.ct-my-16`	`margin-block:var(--space-16)`
`.ct-p-16`	`padding:var(--space-16)`
`.ct-pt-16`	`padding-top:var(--space-16)`
`.ct-pr-16`	`padding-right:var(--space-16)`
`.ct-pb-16`	`padding-bottom:var(--space-16)`
`.ct-pl-16`	`padding-left:var(--space-16)`
`.ct-px-16`	`padding-inline:var(--space-16)`
`.ct-py-16`	`padding-block:var(--space-16)`
`.ct-gap-16`	`gap:var(--space-16)`
`.ct-gap-x-16`	`column-gap:var(--space-16)`
`.ct-gap-y-16`	`row-gap:var(--space-16)`
`.ct-m-20`	`margin:var(--space-20)`
`.ct-mt-20`	`margin-top:var(--space-20)`
`.ct-mr-20`	`margin-right:var(--space-20)`
`.ct-mb-20`	`margin-bottom:var(--space-20)`
`.ct-ml-20`	`margin-left:var(--space-20)`
`.ct-mx-20`	`margin-inline:var(--space-20)`
`.ct-my-20`	`margin-block:var(--space-20)`
`.ct-p-20`	`padding:var(--space-20)`
`.ct-pt-20`	`padding-top:var(--space-20)`
`.ct-pr-20`	`padding-right:var(--space-20)`
`.ct-pb-20`	`padding-bottom:var(--space-20)`
`.ct-pl-20`	`padding-left:var(--space-20)`
`.ct-px-20`	`padding-inline:var(--space-20)`
`.ct-py-20`	`padding-block:var(--space-20)`
`.ct-gap-20`	`gap:var(--space-20)`
`.ct-gap-x-20`	`column-gap:var(--space-20)`
`.ct-gap-y-20`	`row-gap:var(--space-20)`
`.ct-m-24`	`margin:var(--space-24)`
`.ct-mt-24`	`margin-top:var(--space-24)`
`.ct-mr-24`	`margin-right:var(--space-24)`
`.ct-mb-24`	`margin-bottom:var(--space-24)`
`.ct-ml-24`	`margin-left:var(--space-24)`
`.ct-mx-24`	`margin-inline:var(--space-24)`
`.ct-my-24`	`margin-block:var(--space-24)`
`.ct-p-24`	`padding:var(--space-24)`
`.ct-pt-24`	`padding-top:var(--space-24)`
`.ct-pr-24`	`padding-right:var(--space-24)`
`.ct-pb-24`	`padding-bottom:var(--space-24)`
`.ct-pl-24`	`padding-left:var(--space-24)`
`.ct-px-24`	`padding-inline:var(--space-24)`
`.ct-py-24`	`padding-block:var(--space-24)`
`.ct-gap-24`	`gap:var(--space-24)`
`.ct-gap-x-24`	`column-gap:var(--space-24)`
`.ct-gap-y-24`	`row-gap:var(--space-24)`
`.ct-m-32`	`margin:var(--space-32)`
`.ct-mt-32`	`margin-top:var(--space-32)`
`.ct-mr-32`	`margin-right:var(--space-32)`
`.ct-mb-32`	`margin-bottom:var(--space-32)`
`.ct-ml-32`	`margin-left:var(--space-32)`
`.ct-mx-32`	`margin-inline:var(--space-32)`
`.ct-my-32`	`margin-block:var(--space-32)`
`.ct-p-32`	`padding:var(--space-32)`
`.ct-pt-32`	`padding-top:var(--space-32)`
`.ct-pr-32`	`padding-right:var(--space-32)`
`.ct-pb-32`	`padding-bottom:var(--space-32)`
`.ct-pl-32`	`padding-left:var(--space-32)`
`.ct-px-32`	`padding-inline:var(--space-32)`
`.ct-py-32`	`padding-block:var(--space-32)`
`.ct-gap-32`	`gap:var(--space-32)`
`.ct-gap-x-32`	`column-gap:var(--space-32)`
`.ct-gap-y-32`	`row-gap:var(--space-32)`
`.ct-m-40`	`margin:var(--space-40)`
`.ct-mt-40`	`margin-top:var(--space-40)`
`.ct-mr-40`	`margin-right:var(--space-40)`
`.ct-mb-40`	`margin-bottom:var(--space-40)`
`.ct-ml-40`	`margin-left:var(--space-40)`
`.ct-mx-40`	`margin-inline:var(--space-40)`
`.ct-my-40`	`margin-block:var(--space-40)`
`.ct-p-40`	`padding:var(--space-40)`
`.ct-pt-40`	`padding-top:var(--space-40)`
`.ct-pr-40`	`padding-right:var(--space-40)`
`.ct-pb-40`	`padding-bottom:var(--space-40)`
`.ct-pl-40`	`padding-left:var(--space-40)`
`.ct-px-40`	`padding-inline:var(--space-40)`
`.ct-py-40`	`padding-block:var(--space-40)`
`.ct-gap-40`	`gap:var(--space-40)`
`.ct-gap-x-40`	`column-gap:var(--space-40)`
`.ct-gap-y-40`	`row-gap:var(--space-40)`