Spacing
Padding and margin share one numeric scale. Multiply any integer by 0.25rem to get the rendered value.
The scale
Spacing methods take an integer. The value is scaled by
0.25rem, so P(4)
becomes 1rem. A scale of
0 produces 0px.
| Utility | Generated CSS |
|---|---|
P(0) / M(0) |
0px |
P(1) / M(1) |
0.25rem |
P(2) / M(2) |
0.5rem |
P(4) / M(4) |
1rem |
P(6) / M(6) |
1.5rem |
P(8) / M(8) |
2rem |
Padding
| Utility | Generated CSS |
|---|---|
P(n) |
padding |
Px(n) |
padding-inline |
Py(n) |
padding-block |
Pt(n) |
padding-top |
Pr(n) |
padding-right |
Pb(n) |
padding-bottom |
Pl(n) |
padding-left |
P(2)
P(6)
<div class="@Css.P(2).Background(Color.Blue100)">
<div class="@Css.P(2)">P(2)</div>
</div>
<div class="@Css.P(6).Background(Color.Indigo100)">
<div class="@Css.P(2)">P(6)</div>
</div>Margin
| Utility | Generated CSS |
|---|---|
M(n) |
margin |
Mx(n) |
margin-inline |
My(n) |
margin-block |
Mt(n) |
margin-top |
Mr(n) |
margin-right |
Mb(n) |
margin-bottom |
Ml(n) |
margin-left |
Margin bottom 4
Margin top 4
<div class="@Css.Mb(4)">Margin bottom 4</div>
<div class="@Css.Mt(4)">Margin top 4</div>Auto margins
Auto margin helpers are handy for centering a block horizontally or pushing content apart.
| Utility | Generated CSS |
|---|---|
MxAuto() |
margin-inline: auto |
MyAuto() |
margin-block: auto |
Centered
<div class="@Css.P(4)">
<div class="@Css.W(32).MxAuto()">Centered</div>
</div>