CSS Margin and Padding Framework Generator - How to use it

I used to just write this manually, but this generator is much easier than manually typing these margin and padding values.

So what this does is generate css for each step so if i do the default settings it will give you the main classes: where you replace the # with the step number. 

• m# = margin #px
• mt# = margin top #px
• mb# = margin bottom #px
• ml# = margin left #px
• mr# = margin right #px
• p# = padding #px
• pt# = padding top #px
• pb# = padding bottom #px
• pl# = padding left #px
• pr# = padding right #px

This tool generates the minified css for these values all the way up to 1000px if you really wanted that much css waste!

How do you use the classes?

Simply add an element like a div and add the class names, like this:

<div class='mb10 p20'>will give you a div with a margin on the bottom of 10px and padding 20 pixels</div>

Here is a generated working example

See the Pen Margin and Padding Framework tool testing by Luke (@vanderzone) on CodePen.

and here is a link to the tool:

CSS Margin and Padding Framework Generator