Skip to content

Space

Description

The Space component provides margins within the provided spacing patterns.

The reason why this exists is to make Your Syntax as clean as possible. This way You see directly in words what the spacing is for every effected component

Spacing Table

PixelTypeRemCustom Property
8x-small0.5--spacing-x-small
16small1--spacing-small
24medium1.5--spacing-medium
32large2--spacing-large
48x-large3--spacing-x-large
56xx-large3.5--spacing-xx-large

NB: In some circumstances you may be in need of using 0.25rem (4px) - therefore xx-small also exists, but as a single type. So, combining xx-small and small would not result in 0.25rem, but still remain 1rem.

Value Format

There are a couple different ways You can define the spacing types and values:

  • Types: small small x-small (combine types up to 10rem)
  • number: 2.5 (equivalent to rem)
  • rem: 2.5rem
  • px: 40px (gets converted to rem)

To get a spacing of e.g. 2.5rem (40px)- You may combine types large and x-small.

/** All of these methods will result in the same spacing */
<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" />

Components and Spacing

Every component supports the spacing patterns, so it's possible to send in the top, right, bottom and left properties directly, like:

<Button top="large x-small medium" />

Does it not work as expected?

Is margin not giving the expected spacing? That may be the reason due to Margin Collapsing. Margins collapse in the following situations:

  • Adjacent siblings
  • Completely empty boxes
  • Parent and first or last child element

The best solution is to only use once direction of margins e.g. bottom. Or You can set the collapse property to false.

Demos

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

Spacing method #2 - FormRow component

Spacing method #3 - Define the space directly

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

Spacing with no margin collapse, due to the flex usage

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

All four values will result in a equivalent margin