Spacing

A wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

Notation

The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named using the format {property}{sides}.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Transformation

Depending on the input and the theme configuration, the following transformation is applied:

• input: number & theme: number: the property is multiplied by the theme value.

const theme = {
  spacing: 8,
}

<Box m={-2} /> // margin: -16px;
<Box m={0} /> // margin: 0px;
<Box m={0.5} /> // margin: 4px;
<Box m={2} /> // margin: 16px;

• input: number & theme: array: the property is value is used as the array index.

const theme = {
  spacing: [0, 2, 3, 5, 8],
}

<Box m={-2} /> // margin: -3px;
<Box m={0} /> // margin: 0px;
<Box m={2} /> // margin: 3px;

• input: number & theme: function: the function is called with the property value.

const theme = {
  spacing: value => value ** 2,
}

<Box m={0} /> // margin: 0px;
<Box m={2} /> // margin: 4px;

• input: string: the property is passed as raw CSS value.

<Box m="2rem" /> // margin: 2rem;
<Box mx="auto" /> // margin-left: auto; margin-right: auto;

Example

import React from 'react';
import Box from '@material-ui/core/Box';

export default function Color() {
  return (
    <div>
      <Box p={1} bgcolor="background.paper">
        p={1}
      </Box>
      <Box m={1} bgcolor="background.paper">
        m={1}
      </Box>
      <Box p={2} bgcolor="background.paper">
        p={2}
      </Box>
    </div>
  );
}

<Box p={1}>…
<Box m={1}>…
<Box p={2}>…

Horizontal centering

import React from 'react';
import Box from '@material-ui/core/Box';

export default function HorizontalCentering() {
  return (
    <div>
      <Box mx="auto" bgcolor="background.paper" p={1}>
        Centered element
      </Box>
    </div>
  );
}

<Box mx="auto">…

API

import { spacing } from '@material-ui/system';

Import name	Prop	CSS property	Theme key
spacing	m	margin	spacing
spacing	mt	margin-top	spacing
spacing	mr	margin-right	spacing
spacing	mb	margin-bottom	spacing
spacing	ml	margin-left	spacing
spacing	mx	margin-left, margin-right	spacing
spacing	my	margin-top, margin-bottom	spacing
spacing	p	padding	spacing
spacing	pt	padding-top	spacing
spacing	pr	padding-right	spacing
spacing	pb	padding-bottom	spacing
spacing	pl	padding-left	spacing
spacing	px	padding-left, padding-right	spacing
spacing	py	padding-top, padding-bottom	spacing

Some people find the prop shorthand confusing, you can use the full version if you prefer:

-<Box pt={2} />
+<Box paddingTop={2} />

-<Box px={2} />
+<Box paddingX={2} />