Skip to content
Home

Space

Info
Demos
Properties

Global Properties

These properties are available in many other components and elements.

PropertiesDescription
space(optional) Has to be an object with either: top, right, bottom or left. Use spacing values like: small, 1rem, 1 or , 16px.
top(optional) Use spacing values like: small, 1rem, 1 or , 16px. Will use margin-top.
right(optional) Use spacing values like: small, 1rem, 1 or , 16px. will use margin-right.
bottom(optional) Use spacing values like: small, 1rem, 1 or , 16px. will use margin-bottom.
left(optional) Use spacing values like: small, 1rem, 1 or , 16px. will use margin-left.

Component Properties

PropertiesDescription
element(optional) defines the HTML element used. Defaults to div.
stretch(optional) if set to true, then the space element will be 100% in width.
inline(optional) if set to true, then display: inline-block; is used, so the HTML elements get aligned horizontally. Defaults to false.
no_collapse(optional) if set to true, then a wrapper with display: flow-root; is used. This way you avoid Margin Collapsing. Defaults to false. Note: You can't use inline={true} in combination.

Zero

Use either 0 or false (as a number/boolean os string) to set a margin of 0.

Provider

Also, Provider is supporting the collapse property.

import Provider from '@dnb/eufemia/shared/Provider'


render(
  <Provider space={{ no_collapse: true }}>
    <Space>I do not collapse</Space>
    <Space>I do not collapse</Space>
  </Provider>
)