Space

Global Properties

These properties are available in many other components and elements.

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

Property	Type	Description
`element`	`React.Element`	(optional) defines the HTML element used. Defaults to `div`.
`stretch`	`boolean`	(optional) if set to `true`, then the space element will be 100% in width.
`inline`	`boolean`	(optional) if set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.
`innerSpace`	`object` `string` `number` `boolean`	(optional) Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.
`no_collapse`	`boolean`	(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.

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

Also, Provider is supporting the collapse property.

Code Editor<Provider
  space={{
    no_collapse: true,
  }}
>
  <Space>I do not collapse</Space>
  <Space>I do not collapse</Space>
</Provider>