MudBlazor

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 16.

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
  • 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

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>

Breakpoints

You can combine the spacing system with MudBlazor's breakpoints to target specific screen sizes.

Adjust screen size to see the changes.

<MudPaper Class="pa-md-6 mx-lg-auto mud-theme-secondary">
    <MudText Typo="Typo.body1">Adjust screen size to see the changes.</MudText>
</MudPaper>

Centering Horizontal

Centered!

<MudPaper Class="mx-auto pa-6 mud-theme-success">
    <MudText Typo="Typo.body1">Centered!</MudText>
</MudPaper>

Negative Margins

This card uses negative top margin!

<MudPaper Class="mx-auto pa-4 mud-theme-secondary" Style="height:100px; width:150px;">
</MudPaper>
<MudPaper Class="mt-n12 mx-auto pa-6 mud-theme-primary" Elevation="12" Style="width: 350px;">
    <MudText Typo="Typo.body1">This card uses negative top margin!</MudText>
</MudPaper>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙