Spacing

Overview

Source: ./src/fragments/spacings/OCSpacingV1.mdx

The spacing fragment provides utility classes for consistent margin and padding across your project. This page covers margin and padding helpers, including class naming conventions and available sizes.

Info

See the Spacing UX documentation for detailed design guidelines.

Skip to:

Class naming convention
Size values
Margin classes
Padding classes
Usage guidelines
Accessibility

Class naming convention

Spacing classes use the format {prefix}-{property}{sides}-{size}.

Element	Description
`prefix`	Always `oc` for OTTO Components
`type`	`m` for margin, `p` for padding
`sides`	`t` (top), `b` (bottom), `l` (left), `r` (right), `x` (horizontal), `y` (vertical)
`size`	One of `0`, `25`, `50`, `75`, `100`, `150`, `200`

For example, use oc-mb-100 for margin-bottom 16px, or oc-px-50 for horizontal padding 8px.

Size values

The following sizes map to their corresponding pixel values for margin and padding:

Size	Pixel value
0	0px
25	4px
50	8px
75	12px
100	16px
150	24px
200	32px

Margin classes

The following classes are available for setting margins:

Type	Shortcut	Classes
margin	m	`oc-m-0`	`oc-m-25`	`oc-m-50`	`oc-m-75`	`oc-m-100`	`oc-m-150`	`oc-m-200`
margin-top	mt	`oc-mt-0`	`oc-mt-25`	`oc-mt-50`	`oc-mt-75`	`oc-mt-100`	`oc-mt-150`	`oc-mt-200`
margin-right	mr	`oc-mr-0`	`oc-mr-25`	`oc-mr-50`	`oc-mr-75`	`oc-mr-100`	`oc-mr-150`	`oc-mr-200`
margin-bottom	mb	`oc-mb-0`	`oc-mb-25`	`oc-mb-50`	`oc-mb-75`	`oc-mb-100`	`oc-mb-150`	`oc-mb-200`
margin-left	ml	`oc-ml-0`	`oc-ml-25`	`oc-ml-50`	`oc-ml-75`	`oc-ml-100`	`oc-ml-150`	`oc-ml-200`
margin-x	mx	`oc-mx-0`	`oc-mx-25`	`oc-mx-50`	`oc-mx-75`	`oc-mx-100`	`oc-mx-150`	`oc-mx-200`
margin-y	my	`oc-my-0`	`oc-my-25`	`oc-my-50`	`oc-my-75`	`oc-my-100`	`oc-my-150`	`oc-my-200`
Pixel values	-	`0px`	`4px`	`8px`	`12px`	`16px`	`24px`	`32px`

Padding classes

The following classes are available for setting padding:

Type	Shortcut	Classes
padding	p	`oc-p-0`	`oc-p-25`	`oc-p-50`	`oc-p-75`	`oc-p-100`	`oc-p-150`	`oc-p-200`
padding-top	pt	`oc-pt-0`	`oc-pt-25`	`oc-pt-50`	`oc-pt-75`	`oc-pt-100`	`oc-pt-150`	`oc-pt-200`
padding-right	pr	`oc-pr-0`	`oc-pr-25`	`oc-pr-50`	`oc-pr-75`	`oc-pr-100`	`oc-pr-150`	`oc-pr-200`
padding-bottom	pb	`oc-pb-0`	`oc-pb-25`	`oc-pb-50`	`oc-pb-75`	`oc-pb-100`	`oc-pb-150`	`oc-pb-200`
padding-left	pl	`oc-pl-0`	`oc-pl-25`	`oc-pl-50`	`oc-pl-75`	`oc-pl-100`	`oc-pl-150`	`oc-pl-200`
padding-x	px	`oc-px-0`	`oc-px-25`	`oc-px-50`	`oc-px-75`	`oc-px-100`	`oc-px-150`	`oc-px-200`
padding-y	py	`oc-py-0`	`oc-py-25`	`oc-py-50`	`oc-py-75`	`oc-py-100`	`oc-py-150`	`oc-py-200`
Pixel values	-	`0px`	`4px`	`8px`	`12px`	`16px`	`24px`	`32px`

Usage guidelines

To use the spacing utilities, add the appropriate CSS class to your element. For example, to apply a large margin-bottom, use oc-mb-100:

<div class="oc-mb-100">Content</div>

Find an usage example in the spacing demo.

Accessibility

See the accessibility documentation for general guidelines on making your content accessible.

Layout and spacing/Spacing (OCSpacingV1.stories.ts)

Demo: Spacing

Story: fragments-layout-and-spacing-spacing--spacing · tags:

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: Spacing",
  render: allSpacings
}