Edit page

Spacing

With only few reasonable exceptions, all margins and paddings in React UI use predefined spacing values. Using only the values from the spacing scale will help you keep your UI consistent.

👉 You can adjust all custom properties on this page (and more) in your theme by overriding values in the design tokens section.

Spacing nameValueUsage in CSSUsage in SCSSUsage in HTML/JSX*
00--rui-spacing-0spacing.of(0)class="mt-0"
10.25 rem--rui-spacing-1spacing.of(1)class="mt-1"
20.5 rem--rui-spacing-2spacing.of(2)class="mt-2
30.75 rem--rui-spacing-3spacing.of(3)class="mt-3
41 rem--rui-spacing-4spacing.of(4)class="mt-4"
51.5 rem--rui-spacing-5spacing.of(5)class="mt-5
62 rem--rui-spacing-6spacing.of(6)class="mt-6
73 rem--rui-spacing-7spacing.of(7)class="mt-7"

* For the sake of brevity, usage in HTML only illustrates the top margin property. See Spacing helpers for the full list of options.

Shared Spacings

Commonly reused spacings. Bottom spacing is applied unless the element in question is a last child of its parent.

CategoryUsage in CSSUsage in SCSSDefault valueShared by
default--rui-spacing-bottom-defaultspacing.bottom()--rui-spacing-5Paragraphs, lists etc.
headings--rui-spacing-bottom-headingsspacing.bottom(headings)--rui-spacing-5Heading elements
layouts--rui-spacing-bottom-layoutsspacing.bottom(layouts)--rui-spacing-5Layout components

Note on Live Playgrounds

For demonstration purposes, all elements that are direct descendants of live playgrounds in these docs are given a standard margin on all sides which suppresses default spacing behavior described above:

<Playground>
<p>This paragraph will have standard playground margin an all sides.</p>
<p>This paragraph will have it too.</p>
</Playground>

Once wrapped in a div, all elements and components remain unaffected and have exactly the same margins as they would have in a real-world React UI project:

<Playground>
<div>
<p>
This paragraph will have bottom margin of
<code>--rui-spacing-bottom-default</code>.
</p>
<p>
This paragraph is a last child of its parent and thus will have no bottom
margin.
</p>
</div>
</Playground>