Muhi Logo Text
Work With MeAboutTestimonialsBlog

Spacing, Padding, and Margin with Material UI (MUI)

Learn how to create padding, margin, and grid spacing with theme customization using Material UI (MUI).

Last updated on December 03, 2023

react
mui
MUI Spacing

Applying spacing between components is an essential part of building a UI. One common way is to use CSS padding and margin. MUI spacing provides an efficient way to apply inline padding and margin in components and a theme helper function that allows us to systemize spacing throughout the application.

This tutorial will explore the MUI’s approach to creating spacing and customizing it to fit our design system.

Inline Padding and Margin

MUI sx prop allows us to apply padding and margin to our components with shorthand properties.

For example, when using the normal padding syntax, we would write:

<Box sx={{ paddingRight: "16px" }} />

But with the shorthand syntax, we can write:

<Box sx={{ pr: "16px" }} />

This has the benefit of being shorter and allows us to use the spacing scale defined in the theme. Later in this tutorial, we will explore how to customize the spacing scale.

Here is a list of the available margin and padding properties with the actions they perform:

Padding Properties

Property Description Action
p Padding Applies padding to all sides
px Padding X Applies padding to the left and right sides
py Padding Y Applies padding to the top and bottom sides
pt Padding Top Applies padding to the top side
pr Padding Right Applies padding to the right side
pb Padding Bottom Applies padding to the bottom side
pl Padding Left Applies padding to the left side

Margin Properties

Property Description Action
m Margin Applies margin to all sides
mx Margin X Applies margin to the left and right sides
my Margin Y Applies margin to the top and bottom sides
mt Margin Top Applies margin to the top side
mr Margin Right Applies margin to the right side
mb Margin Bottom Applies margin to the bottom side
ml Margin Left Applies margin to the left side

In the following example, we will add padding to the Box component using the p property and margin to the Typography component using the mx property to center the text content.

import React from "react"
import { Box, Typography } from "@mui/material"
export default function App() {
  return (
    <Box
      sx={{
        p: "16px",
        backgroundColor: "#c9e4d5",
        color: "#fff",
      }}
    >
      <Typography
        sx={{
          backgroundColor: "#6669ad",
          width: "fit-content",
          p: "16px",
          mx: "auto",
        }}
      >
        Hello World
      </Typography>
    </Box>
  )
}

MUI Padding and Margin

The results above demonstrate how p applies padding to all sides and mx applies margin to the left and right sides of the Typography component.

Theme Spacing

MUI provides a theme helper function to systemize spacing and create consistency all throughout the application. The theme.spacing function returns a value from the spacing scale based on the argument passed to it.

Default Spacing Scale

By default, MUI uses the 8px scaling factor. So, when we pass 1 to the theme.spacing function, it will return 8px. Similarly, when we pass 2, it will return 16px and so on.

Let’s try a simple example to understand how it works. We will create a Box component and apply padding to it using the theme.spacing function.

<Box
  sx={{
    p: theme => theme.spacing(2),
  }}
>
  Hello World
</Box>

The padding value is now 16px, which is the value returned by the theme.spacing function when we pass 2 to it.

To simplify this, we can pass only the number to the p property, and MUI will automatically call the theme.spacing function for us!

<Box
  sx={{
    p: 2, // equivalent to (theme) => theme.spacing(2)
  }}
>
  Hello World
</Box>

Custom Spacing Scale

We can use the spacing property in the theme object to customize the spacing scale and pass it a new value.

import React from "react"
import { createTheme, ThemeProvider, Box } from "@mui/material"

const theme = createTheme({
  spacing: 4,
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          p: 2, // 8px
        }}
      >
        ...
      </Box>
    </ThemeProvider>
  )
}

Now, the padding value is 8px because we have changed the spacing scale to a multiple of 4.

Alternatively, we can pass an array of values to the spacing property to create a custom spacing scale.

import React from "react"
import { createTheme, ThemeProvider, Box } from "@mui/material"

const theme = createTheme({
  spacing: ["0", "4px", "8px", "16px", "32px", "64px"],
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          p: 2, // 8px
        }}
      >
        ...
      </Box>
    </ThemeProvider>
  )
}

When using a custom array, the value passed to the theme.spacing function will be used as an index to return the value from the array. So, when we pass 2, it will return 8px because it is the value at index 2 in the array.

Grid and Flex Gap

Creating spacing is not limited to padding and margin. CSS grid and flex have a gap property for creating spacing between components in a grid or flex layout. Additionally, the value of the gap property is used by the theme.spacing function to utilize the spacing scale.

In the following example, we will create a grid layout with 3 columns using the Grid component. We will use the gap property to create spacing between the grid items.

import React from "react"
import { createTheme, ThemeProvider, Grid, Box } from "@mui/material"

const theme = createTheme({
  spacing: 4,
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container gap={2} wrap="nowrap">
        <Grid item xs={4}>
          <Box
            sx={{
              backgroundColor: "#c9e4d5",
              height: "100px",
            }}
          />
        </Grid>
        <Grid item xs={4}>
          <Box
            sx={{
              backgroundColor: "#c9e4d5",
              height: "100px",
            }}
          />
        </Grid>
        <Grid item xs={4}>
          <Box
            sx={{
              backgroundColor: "#c9e4d5",
              height: "100px",
            }}
          />
        </Grid>
      </Grid>
    </ThemeProvider>
  )
}

MUI Grid Gap

Similar to the margin and padding, gap={2} is equivalent to gap={theme => theme.spacing(2)} and will return 8px because we have set the spacing scale to a multiple of 4.

gap can also be used in sx prop to create spacing between flex or grid items without using the Grid component.

<Box
  sx={{
    display: "flex",
    gap: 2,
  }}
>
  ...
</Box>
<Box
  sx={{
    display: "grid",
    gap: 2,
  }}
>
  ...
</Box>

Summary

In this tutorial, we learned how spacing works in MUI using sx inline styles and a custom spacing scale in the theme. It is important to follow and create a spacing system in our application; it makes the UI look more consistent and the code easier to maintain and scale.

Bye for now πŸ‘‹

If you enjoyed this post, I regularly share similar content on Twitter. Follow me @muhimasri to stay up to date, or feel free to message me on Twitter if you have any questions or comments. I'm always open to discussing the topics I write about!

Recommended Reading

Learn how to create, customize & style vertical tabs in React & MUI with icons, labels, and custom styles.

react
mui

Discussion

Upskill Your Frontend Development Techniques 🌟

Subscribe to stay up-to-date and receive quality front-end development tutorials straight to your inbox!

​

No spam, sales, or ads. Unsubscribe anytime you wish.

Β© 2024, Muhi Masri