Spacing

Metro UI 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 classes
• p - padding classes

Where sides is one of:

• t - margin-top or padding-top
• b - margin-bottom or padding-bottom
• l - margin-left or padding-left
• r - margin-right or padding-right
• x - margin-right and margin-left or padding-right and padding-left
• y - margin-top and margin-bottom or padding-top and padding-bottom

Where size 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 UI contains margin with negative value. To use add negative margin, use classes with suffix -minus.

                    <div class="mb-4-minus">
                    ...
                    </div>
                

Additional

Additionally, Metro UI 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 auto
• ml-auto - set left to auto
• mr-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>