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

Define the space directly.

<Input label="Input A" bottom="small" />
<Input label="Input B" />

Spacing method #3

Using createSpacing or applySpacing.

Space A
Space B
Inner Space
Has space when breakpoint is large
const Component = ({ className = null, style = null, ...props }) => {
  const params = applySpacing(props, {
    ...props,
    className: `my-component dnb-space ${className || ''}`.trim(),
    style,
  })
  return <div {...params} />
}
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 space

The space property supports media query breakpoints (small, medium, large) for responsive spacing. Provide an object with breakpoint keys to apply different values at each screen size.

Content

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

Responsive innerSpace

The innerSpace property controls padding inside the Space component. It shares the same API as space.

Content

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

inline and block shorthand

Both space and innerSpace properties support inline and block shorthand properties for more semantic spacing control.

  • inline applies spacing to left and right (horizontal)
  • block applies spacing to top and bottom (vertical)
space: inline=small (left/right), block=large (top/bottom)
innerSpace: inline=medium (left/right), block=x-small (top/bottom)
Combined: space block=large + innerSpace inline=medium, block=small
Responsive inline/block for both space and innerSpace
Different combinations per breakpoint
Mixed: space inline + top override, innerSpace block
{/* Basic inline/block usage for space (margin) */}
<Space
  space={{
    inline: 'small',
    block: 'large',
  }}
>
  <RedBox>
    space: inline=small (left/right), block=large (top/bottom)
  </RedBox>
</Space>
{/* Basic inline/block usage for innerSpace (padding) */}
<Space
  innerSpace={{
    inline: 'medium',
    block: 'x-small',
  }}
>
  <RedBox>
    innerSpace: inline=medium (left/right), block=x-small (top/bottom)
  </RedBox>
</Space>
{/* Combining both space and innerSpace with inline/block */}
<Space
  space={{
    block: 'large',
  }}
  innerSpace={{
    inline: 'medium',
    block: 'small',
  }}
>
  <RedBox>
    Combined: space block=large + innerSpace inline=medium, block=small
  </RedBox>
</Space>
{/* Media queries with inline/block for both properties */}
<Space
  space={{
    small: {
      inline: 'x-small',
    },
    medium: {
      block: 'medium',
    },
    large: {
      inline: 'large',
      block: 'small',
    },
  }}
  innerSpace={{
    small: {
      block: 'x-small',
    },
    medium: {
      inline: 'small',
    },
    large: {
      inline: 'medium',
      block: 'large',
    },
  }}
>
  <RedBox>
    <div>Responsive inline/block for both space and innerSpace</div>
    <div>Different combinations per breakpoint</div>
  </RedBox>
</Space>
{/* Mixing inline/block with traditional directional props */}
<Space
  space={{
    inline: 'small',
  }}
  top="x-large"
  innerSpace={{
    block: 'medium',
  }}
>
  <RedBox>Mixed: space inline + top override, innerSpace block</RedBox>
</Space>

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