Space

The space scale helps maintain consistent spacing around and between elements. This scale applies primarily to margin, padding, spacing and gap.

50 / 2px

100 / 4px

200 / 8px

300 / 12px

400 / 16px

500 / 24px

600 / 32px

700 / 40px

800 / 48px

900 / 64px

950 / 80px

1000 / 96px

1100 / 128px

1200 / 160px

Usage

React

See the style props documentation for the complete list of style props that use the space scale.

live

<div className="example-space">
  <Box mr="100" />
  <Box mr="200" />
  <Box mr="300" />
  <Box mr="400" />
  <Box mr="500" />
  <Box mr="600" />
  <Box mr="700" />
  <Box mr="800" />
  <Box mr="900" />
</div>

Bootstrap

Use the spacing utilities to apply system spacing such as margin, padding etc.

live

<div class="example-space">
  <div class="me-100"></div>
  <div class="me-200"></div>
  <div class="me-300"></div>
  <div class="me-400"></div>
  <div class="me-500"></div>
  <div class="me-600"></div>
  <div class="me-700"></div>
  <div class="me-800"></div>
  <div class="me-900"></div>
</div>

Blueprint

Settings

Space

Usage

React

Bootstrap