Spacing
Metro 4 includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
Notation
The classes are named using the format {property}{sides}-{size}
for default
and {property}{sides}-{size}-{breakpoint}
for sm
, md
, lg
, xl
and xxl
breakpoints.
Where property is one of:
m
- margin classesp
- padding classes
Where sides is one of:
t
-margin-top
orpadding-top
b
-margin-bottom
orpadding-bottom
l
-margin-left
orpadding-left
r
-margin-right
orpadding-right
x
-margin-right
andmargin-left
orpadding-right
andpadding-left
y
-margin-top
andmargin-bottom
orpadding-top
andpadding-bottom
Where sise from 0
to 80px
with step 4px
<div class=" bg-pink fg-white p-1 p-3-md p-5-lg p-8-xl text-center">
This block with dynamic padding
</div>
if you need to have different paddings on different sides, you must define them explicitly for each of the parties.
<div class="pl-10 pt-4 pr-10 pb-4">
This block with any paddings
</div>
Negative margin
Also Metro 4 contains margin
with negative value. To use add negative margin, use classes with suffix -minus
.
<div class="mb-4-minus">
...
</div>
Additional
Additionally, Metro 4 also includes an .mx-auto
, .ml-auto
and .mr-auto
and them media variants. This classes sets margin
to auto
.
mx-auto
- set right and left to automl-auto
- set left to automr-auto
- set right to auto
<div class="mx-auto p-2 bg-cyan fg-white" style="width: 220px">
This centered block with mx-auto class
</div>