Posted in css
2847
5:06 am, September 17, 2018
 

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

View Statistics
This Week
83
This Month
344
This Year
341

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Articles
Search Articles by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Random CSS Property

translateX()

The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.
translateX() css reference