MudBlazor - Blazor Component Library

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>

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>

Spacing