more_vert
English
Spanish
HindiSpacing
Where property is one of:
m- for classes that setmarginp- for classes that setpadding
Where sides is one of:
t- for classes that setmargin-toporpadding-topb- for classes that setmargin-bottomorpadding-bottoml- for classes that setmargin-leftorpadding-leftr- for classes that setmargin-rightorpadding-rightx- for classes that set both*-leftand*-righty- for classes that set both*-topand*-bottom- blank - for classes that set a
marginorpaddingon all 4 sides of the element
Where size is one of:
0- for classes that eliminate themarginorpaddingby setting it to0xxxs- (by default) for classes that set themarginorpaddingto.0625remxxs- (by default) for classes that set themarginorpaddingto.125remxs- (by default) for classes that set themarginorpaddingto.25remsm- (by default) for classes that set themarginorpaddingto.5remmd- (by default) for classes that set themarginorpaddingto1remlg- (by default) for classes that set themarginorpaddingto1.5remxl- (by default) for classes that set themarginorpaddingto2remxxl- (by default) for classes that set themarginorpaddingto2.5remxxxl- (by default) for classes that set themarginorpaddingto3remauto- for classes that set themarginto auto
Negative margins
-xxxs- (by default) for classes that set themarginto-.0625rem-xxs- (by default) for classes that set themarginto-.125rem-xs- (by default) for classes that set themarginto-.25rem-sm- (by default) for classes that set themarginto-.5rem-md- (by default) for classes that set themarginto-1rem-lg- (by default) for classes that set themarginto-1.5rem-xl- (by default) for classes that set themarginto-2rem-xxl- (by default) for classes that set themarginto-2.5rem-xxxl- (by default) for classes that set themarginto-3rem
Examples
Positive margin right
Negative margin right
Positive margin bottom
Negative margin bottom
<div class="mr-xl"> Margin Right 2rem </div>Lorem ipsum dolor sit amet
<div class="mr--md"> Margin Right -1rem </div>Lorem ipsum dolor sit amet
<div class="mb-md"> Margin Bottom 1rem </div>Lorem ipsum dolor sit amet
<div class="mb--sm"> Margin Bottom -.5rem </div>Lorem ipsum dolor sit amet
Margin auto
<div class="md--md"> Margin Left & Right auto </div>