Skip to content
Home

Space

Info
Demos
Properties

Demos

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

<RedBox>

  <Space top="large x-small">

    <Input label="Input:" />

  </Space>

</RedBox>

Spacing method #2 - FormRow component

<FormRow>

  <Input label="Input A:" />

</FormRow>

<FormRow top="medium">

  <Input label="Input B:" />

</FormRow>

Spacing method #3 - Define the space directly

<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