Skip to content
Home

Space

Info
Demos
Properties

Demos

Spacing method #1 - Space component. The RedBox is only to visualize the result.

Code Editor
<RedBox>
  <Space top="large x-small">
    <Input label="Input:" />
  </Space>
</RedBox>

Spacing method #2 - FormRow component

Code Editor
<FormRow>
  <Input label="Input A:" />
</FormRow>
<FormRow top="medium">
  <Input label="Input B:" />
</FormRow>

Spacing method #3 - Define the space directly

Code Editor
<FormRow>
  <Input label="Input A:" right="small" />
  <Input label="Input B:" />
</FormRow>

Spacing with no margin collapse, due to the flex usage

I have bottom="small"
I have top="large"

All four values will result in an equivalent margin

I have four 2.5rem margins!And this are my CSS classes: dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small

Visual space testing

With dnb-core-style

Without