Space Between

Utilities for controlling the space between child elements.

Add horizontal space between children

Control the horizontal space between elements using the spaceX={space} utilities.

<x.div display="flex" spaceX={4}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Add vertical space between children

Control the vertical space between elements using the spaceY={space} utilities.

<x.div spaceY={4}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Reversing children order

If your elements are in reverse order (using say flexDirection="row-reverse" or flexDirection="col-reverse"), use the spaceXReverse or spaceYReverse utilities to ensure the space is added to the correct side of each element.

<x.div display="flex" spaceX={4} spaceXReverse>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property spaceX={{ md: 8 }} to an element would apply the spaceX={8} utility at medium screen sizes and above.

<x.div display="flex" spaceX={{ xs: 2, md: 4 }}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Spacing scale

If you'd like to customize your values for margin, padding, space between, all at once, use the theme.space section of your theme.

  // theme.js
  export const theme = {
    space: {
+     sm: '8px',
+     md: '16px',
+     lg: '24px',
+     xl: '48px',
    },
  }

Learn more about customizing the default theme in the theme customization documentation.

If you don't want to customize it, a set of space is already defined in default theme:

const defaultTheme = {
  // ...
  space: {
    0.5: '0.125rem',
    1: '0.25rem',
    1.5: '0.375rem',
    2: '0.5rem',
    2.5: '0.625rem',
    3: '0.75rem',
    3.5: '0.875rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
    11: '2.75rem',
    12: '3rem',
    14: '3.5rem',
    16: '4rem',
    20: '5rem',
    24: '6rem',
    28: '7rem',
    32: '8rem',
    36: '9rem',
    40: '10rem',
    44: '11rem',
    48: '12rem',
    52: '13rem',
    56: '14rem',
    60: '15rem',
    64: '16rem',
    72: '18rem',
    80: '20rem',
    96: '24rem',
  },
}