Space

A Space component can be used to add padding around components.

<React.Fragment>
  <Space
    padding="1"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      padding: 1
    </div>
  </Space>
  <Space
    padding="2"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      padding: 2
    </div>
  </Space>
  <Space
    padding="3"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      padding: 3
    </div>
  </Space>
  <Space
    padding="15"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      padding: 15
    </div>
  </Space>
</React.Fragment>
padding: 1
padding: 2
padding: 3
padding: 15

Specific paddings

Instead of the default padding, you can also set specific paddings, e.g. paddingTop.

<React.Fragment>
  <Space
    paddingTop="1"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      paddingTop: 3
    </div>
  </Space>
  <Space
    paddingBottom="1"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      paddingBottom: 3
    </div>
  </Space>
  <Space
    paddingLeft="1"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      paddingLeft: 1
    </div>
  </Space>
  <Space
    paddingRight="1"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      paddingRight: 1
    </div>
  </Space>
</React.Fragment>
paddingTop: 3
paddingBottom: 3
paddingLeft: 1
paddingRight: 1

Horizontal and vertical shortcuts

As you often need to set both horizontal or both vertical paddings, the Space components provides two shortcut properties: paddingX and paddingY.

<React.Fragment>
  <Space
    paddingX="3"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      paddingX: 3
    </div>
  </Space>
  <Space
    paddingY="3"
  >
    <div
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      paddingY: 3
    </div>
  </Space>
</React.Fragment>
paddingX: 3
paddingY: 3

Defining space between children

To specify the space between child elements use the between property:

<Space
  between="3"
>
  <div
    style={
      Object {
        "background": "deeppink",
      }
    }
  >
    First
  </div>
  <div
    style={
      Object {
        "background": "deeppink",
      }
    }
  >
    Second
  </div>
  <div
    style={
      Object {
        "background": "deeppink",
      }
    }
  >
    Last
  </div>
</Space>
First
Second
Last

Using responsive values

All properties can also be set depending on the size of the viewport:

<Space
  between={
    Object {
      "lg": 6,
      "md": 4,
      "sm": 2,
      "xl": 8,
      "xs": 1,
    }
  }
  padding={
    Object {
      "lg": 6,
      "md": 4,
      "sm": 2,
      "xl": 8,
      "xs": 1,
    }
  }
>
  <div
    style={
      Object {
        "background": "deeppink",
      }
    }
  >
    The padding of this div will change with the size of the viewport. 
    <br />
    { xs: 1, sm: 2, md: 4, lg: 6, xl: 8 }
  </div>
  <div
    style={
      Object {
        "background": "deeppink",
      }
    }
  >
    The padding of this div will change with the size of the viewport. 
    <br />
    { xs: 1, sm: 2, md: 4, lg: 6, xl: 8 }
  </div>
</Space>
The padding of this div will change with the size of the viewport.
{ xs: 1, sm: 2, md: 4, lg: 6, xl: 8 }
The padding of this div will change with the size of the viewport.
{ xs: 1, sm: 2, md: 4, lg: 6, xl: 8 }