Blazorise Spacing Utilities

Control margin and padding with fluent spacing utilities that keep layout rhythm consistent across breakpoints.

Spacing utilities let you apply margin and padding directly from C#, so layout decisions stay alongside your components and do not require hand-written CSS. They map to your CSS provider, keeping spacing tokens consistent with your design system.

How it works

Use Margin or Padding on any component and chain sizes like Is0 through Is5 with side helpers such as FromTop, FromBottom, FromStart, FromEnd, OnX, and OnY. Add breakpoints like OnMobile, OnTablet, and OnDesktop to adjust spacing responsively without media queries.

Examples

Responsive margin

This example applies a smaller margin on mobile and a larger margin on desktop, keeping the card readable on small screens while giving it more breathing room on larger layouts.

The second card switches to padding to show how OnX and OnY keep content readable while preserving layout rhythm.

The final card uses start-only padding that increases on desktop to keep text aligned with larger layouts.

This example sets the margins for mobile (OnMobile) and desktop (OnDesktop) breakpoints.
This example uses extra horizontal padding with OnX to keep content readable.
This example applies start-only padding that grows on desktop to keep content aligned with wider layouts. 
<Card>
    <CardBody Margin="Margin.Is2.OnMobile.Is5.OnDesktop">
        This example sets the margins for mobile (OnMobile) and desktop (OnDesktop) breakpoints.
    </CardBody>
</Card>

<Card Margin="Margin.Is3.FromTop">
    <CardBody Padding="Padding.Is2.OnY.Is4.OnX">
        This example uses extra horizontal padding with <Code>OnX</Code> to keep content readable.
    </CardBody>
</Card>

<Card Margin="Margin.Is3.FromTop">
    <CardBody Padding="Padding.Is2.FromStart.OnMobile.Is4.FromStart.OnDesktop">
        This example applies start-only padding that grows on desktop to keep content aligned with wider layouts.
    </CardBody>
</Card>
On this page