Spacing

Spacing is a way to modify padding or margin without creating new classes.

How it works

Use the margin or padding property and choose a direction. Then add size, ranging from 0 to 20.

The properties:

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

The direction property applies to:

  • t - for margin-top or padding-top
  • b - for margin-bottom or padding-bottom
  • l - for margin-left or padding-left
  • r - for margin-right or padding-right
  • s - for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)
  • e - for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)
  • x - for margin-left/padding-left and margin-right/padding-right
  • y - for margin-top/padding-top and margin-bottom/padding-bottom
  • a - for all 4 sides.
Size

The size changes with an interval of 4 pixels.

Positive
  • 0 sets margin or padding to 0
  • 1 sets margin or padding to 4px
  • 2 sets margin or padding to 8px
  • 3 sets margin or padding to 12px
  • 4 sets margin or padding to 16px
  • 5 sets margin or padding to 20px
  • 6 sets margin or padding to 24px
  • 7 sets margin or padding to 28px
  • 8 sets margin or padding to 32px
  • 9 sets margin or padding to 36px
  • 10 sets margin or padding to 40px
  • 11 sets margin or padding to 44px
  • 12 sets margin or padding to 48px
  • 13 sets margin or padding to 52px
  • 14 sets margin or padding to 56px
  • 15 sets margin or padding to 60px
  • 16 sets margin or padding to 64px
  • 17 sets margin or padding to 68px
  • 18 sets margin or padding to 72px
  • 19 sets margin or padding to 76px
  • 20 sets margin or padding to 80px
  • auto sets the spacing to auto
Negative
  • n1 sets margin to -4px
  • n2 sets margin to -8px
  • n3 sets margin to -12px
  • n4 sets margin to -16px
  • n5 sets margin to -20px
  • n6 sets margin to -24px
  • n7 sets margin to -28px
  • n8 sets margin to -32px
  • n9 sets margin to -36px
  • n10 sets margin to -40px
  • n11 sets margin to -44px
  • n12 sets margin to -48px
  • n13 sets margin to -52px
  • n14 sets margin to -56px
  • n15 sets margin to -60px
  • n16 sets margin to -64px
  • n17 sets margin to -68px
  • n18 sets margin to -72px
  • n19 sets margin to -76px
  • n20 sets margin to -80px
Examples

pa-4 mr-16

pa-4

pa-4 ml-8

<MudPaper Class="pa-4 mr-16">
    <MudText Typo="Typo.subtitle2">pa-4 mr-16</MudText>
</MudPaper>
<MudPaper Class="pa-4">
    <MudText Typo="Typo.subtitle2">pa-4</MudText>
</MudPaper>
<MudPaper Class="pa-4 ml-8">
    <MudText Typo="Typo.subtitle2">pa-4 ml-8</MudText>
</MudPaper>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙