Vizru Design System

Spacing

Spacing utilities refer to predefined classes that are used to add margin and padding to elements. These classes help to quickly and easily apply consistent spacing.

How it works

Assign margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

Notations

The classes are named using the format {property}{sides}{size}

Where property is one of:

m for classes that set margin
p for classes that set padding
mar for classes that set margin from all sides
pad for classes that set paddingfrom all sides

Where sides is one of:

t (top) for classes that set margin-top or padding-top
b (bottom) for classes that set margin-bottom or padding-bottom
l (left) for classes that set margin-left or padding-left
r (right) for classes that set margin-right or padding-right

Where size is one of:

0 for classes that eliminate the margin or padding by setting it to 0
1 - 100 (by default) for classes that set the margin or padding from 1 - 100 px
auto for classes that set the margin to auto

Margin

Here are some representative examples of these classes:.

                        
                        .mar0{ margin: 0  }
.mar3{ margin: 3px  }
.mar5{ margin: 5px  }
.mar8{ margin: 8px  }
.mar10{ margin: 10px  }
.mar12{ margin: 12px  }
.mar15{ margin: 15px  }
.mar20{ margin: 20px  }
.mar25{ margin: 25px  }
.mar30{ margin: 30px  }

Margin Top classes

                        
                        .mt0 { margin-top: 0  }
.mt1 { margin-top: 1px  }
.mt2 { margin-top: 2px  }
.mt3 { margin-top: 3px  }
.mt5 { margin-top: 5px  }
.mt7 { margin-top: 7px  }
.mt10 { margin-top: 10px  }
.mt15 { margin-top: 15px  }
.mt20 { margin-top: 20px  }
.mt25 { margin-top: 25px } 
.mt30 { margin-top: 30px }
.mt35 { margin-top: 35px }
.mt50 { margin-top: 50px }
.mt100 { margin-top: 100px }
.mt_1 { margin-top: -1px  }
.mt_2 { margin-top: -2px  }
.mt_3 { margin-top: -3px  }
.mt_5 { margin-top: -5px  }
.mt_7 { margin-top: -7px  }
.mt_10 { margin-top: -10px  }
.mt_15 { margin-top: -15px  }
.mt_20 { margin-top: -20px  }
.mt_25 { margin-top: -25px  }
.mt_30 { margin-top: -30px  }
.mt_35 { margin-top: -35px  }

Margin Right classes

        
        .mr0 { margin-right: 0px  }
.mr1 { margin-right: 1px  }
.mr2 { margin-right: 2px  }
.mr3 { margin-right: 3px  }
.mr5 { margin-right: 5px  }
.mr7 { margin-right: 7px  }
.mr10 { margin-right: 10px  }
.mr15 { margin-right: 15px  }
.mr20 { margin-right: 20px  }
.mr25 { margin-right: 25px  }
.mr30 { margin-right: 30px  }
.mr35 { margin-right: 40px  }
.mr50 { margin-right: 50px  }
.mr100 { margin-right: 100px  }
.mr_1 { margin-right: -1px  }
.mr_2 { margin-right: -2px  }
.mr_3 { margin-right: -3px  }
.mr_5 { margin-right: -5px  }
.mr_7 { margin-right: -7px  }
.mr_10 { margin-right: -10px  }
.mr_15 { margin-right: -15px  }
.mr_20 { margin-right: -20px  }
.mr_25 { margin-right: -25px  }
.mr_30 { margin-right: 30px  }
.mr_35 { margin-right: 35px  }

Margin Bottom classes

        
        .mb0 { margin-bottom: 0px  }
.mb1 { margin-bottom: 1px  }
.mb2 { margin-bottom: 2px  }
.mb3 { margin-bottom: 3px  }
.mb5 { margin-bottom: 5px  }
.mb7 { margin-bottom: 7px  }
.mb10 { margin-bottom: 10px  }
.mb15 { margin-bottom: 15px  }
.mb20 { margin-bottom: 20px  }
.mb25 { margin-bottom: 25px  }
.mb30 { margin-bottom: 30px  }
.mb50 { margin-bottom: 50px  }
.mb100 { margin-bottom: 100px  }
.mb_1 { margin-bottom: -1px  }
.mb_2 { margin-bottom: -2px  }
.mb_3 { margin-bottom: -3px  }
.mb_5 { margin-bottom: -5px  }
.mb_7 { margin-bottom: -7px  }
.mb_10 { margin-bottom: -10px  }
.mb_15 { margin-bottom: -15px  }
.mb_20 { margin-bottom: -20px  }
.mb_25 { margin-bottom: -25px  }
.mb_30 { margin-bottom: 30px  }
.mb_35 { margin-bottom: 35px  }

Margin Left classes

        
        .ml0 { margin-left: 0px  }
.ml1 { margin-left: 1px  }
.ml2 { margin-left: 2px  }
.ml3 { margin-left: 3px  }
.ml5 { margin-left: 5px  }
.ml7 { margin-left: 7px  }
.ml10 { margin-left: 10px  }
.ml15 { margin-left: 15px  }
.ml20 { margin-left: 20px  }
.ml25 { margin-left: 25px  }
.ml30 { margin-left: 30px  }
.ml35 { margin-left: 35px }
.ml50 { margin-left: 50px }
.ml100 { margin-left: 100px }
.ml_1 { margin-left: -1px  }
.ml_2 { margin-left: -2px  }
.ml_3 { margin-left: -3px  }
.ml_5 { margin-left: -5px  }
.ml_7 { margin-left: -7px  }
.ml_10 { margin-left: -10px  }
.ml_15 { margin-left: -15px  }
.ml_20 { margin-left: -20px  }
.ml_25 { margin-left: -25px  }
.ml_30 { margin-left: -30px  }
.ml_35 { margin-left: -35px  }

Padding