Spacing

Overview #

In the MIZ framework, spacing (Padding and Margin) is managed using predefined classes. These classes allow you to easily adjust the internal (Padding) and external (Margin) spacing of elements. Additionally, you can customize these classes to set your desired values and units.

Basic Spacing Classes #

Padding

Padding classes are identified with the prefix p and allow you to set the internal spacing of elements. For example:

Margin

Margin classes are identified with the prefix m and allow you to set the external spacing of elements. For example:

Gap

Gap classes are identified with the prefix gap and are used to set the spacing between elements in Flexbox and Grid containers. For example:

How to Use #

To use these classes, simply add them to your desired element. For example:

                    

HTML

<div class="m-2 m-sm-0 bg-primary-color"> <!-- Internal content --> </div> <div class="p-sm-2 mr-1 bg-primary-color"> <!-- Internal content --> </div> <div class="d-flex gap-2 gap-lg-4"> <div>First item</div> <div>Second item</div> </div>

Custom Settings #

All spacing classes are customizable. For example, you can customize the padding settings in miz/sass/config/_responsive.scss

                    

HTML

$conf-paddings: ( count: 10, unit: rem, factor: 0.5, responsive: true );

In these settings:

Key Points #