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 name||Value||Usage in CSS||Usage in SCSS||Usage in HTML/JSX*|
* For the sake of brevity, usage in HTML only illustrates the top margin property. See Spacing helpers for the full list of options.
Commonly reused spacings. Bottom spacing is applied unless the element in question is a last child of its parent.
|Category||Usage in CSS||Usage in SCSS||Default value||Shared by|
|default||Paragraphs, lists etc.|
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 bottommargin.</p></div></Playground>