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

Define the space directly.

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

Spacing method #3

Using createSpacingClasses or createSpacingProperties.

Space A
Space B
Inner Space
Has space when breakpoint is large
Code Editor
const Component = ({ className = null, style = null, ...props }) => {
  const spacingClasses = createSpacingClasses(props)
  const spacingProperties = createSpacingProperties(props)
  const cn = classnames(
    'my-component',
    'dnb-space',
    spacingClasses,
    className,
  )
  const st = {
    ...style,
    ...spacingProperties,
  }
  return <div className={cn} style={st} {...removeSpaceProps(props)} />
}
render(
  <>
    <RedBox>
      <Component top="small medium large">Space A</Component>
    </RedBox>
    <RedBox>
      <Component top>Space B</Component>
    </RedBox>
    <RedBox>
      <Component innerSpace="large">Inner Space</Component>
    </RedBox>
    <RedBox>
      <Component
        innerSpace={{
          large: true,
        }}
      >
        Has space when breakpoint is large
      </Component>
    </RedBox>
  </>,
)

Responsive innerSpace

For "padding" inside the space component, you can use the property innerSpace.

It supports the same API as the space prop.

But in addition it supports media query breakpoints, such as small, medium and large.

Content

Code Editor
<RedBox>
  <Space
    innerSpace={{
      small: 'large x-small',
      medium: true,
      large: {
        top: '2rem',
        left: '16px',
        bottom: 'large',
        right: '5rem',
      },
    }}
  >
    <P>Content</P>
  </Space>
</RedBox>

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