Saltar al contenido

Espaciado

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

Notación

La utilidad espacial convierte el abreviado del margen corto y los accesorios de relleno en márgenes y declaraciones CSS. Los props se nombran usando el formato {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*
  • en blanco - para las clases que establecen un margen o un relleno en los 4 lados del elemento

Transformación

Dependiendo del input y la configuración del tema, se aplica la siguiente transformación:

  • input: number & theme: number: the property is multiplied by the theme value.
const theme = {
  spacing: 8,
}

<Box sx={{ m: -2 }} /> // margin: -16px;
<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 0.5 }} /> // margin: 4px;
<Box sx={{ 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 sx={{ m: -2 }} /> // margin: -3px;
<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 2 }} /> // margin: 3px;
  • input: number & theme: function: the function is called with the property value.
const theme = {
  spacing: value => value ** 2,
}

<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 2 }} /> // margin: 4px;
  • input: string: the property is passed as raw CSS value.
<Box sx={{ m: "2rem" }} /> // margin: 2rem;
<Box sx={{ mx: "auto" }} /> // margin-left: auto; margin-right: auto;

Ejemplo

p: 1
m: 1
p: 2
<Box sx={{ p: 1 }}><Box sx={{ m: 1 }}><Box sx={{ p: 2 }}>

Centrado Horizontal

Centered element
<Box sx={{ mx: "auto" }}>

API

import { spacing } from '@material-ui/system';
Nombre del import Prop Propiedad CSS Clave del tema
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

Algunas personas encuentran confusión con la abreviatura del prop, puedes usar la versión completa si lo prefieres:

-<Box sx={{ pt: 2 }} />
+<Box sx={{ paddingTop: 2 }} />
-<Box sx={{ px: 2 }} />
+<Box sx={{ paddingX: 2 }} />