Posted in css
2852
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
88
This Month
349
This Year
346

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
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown
Random CSS Property

background-position-x

The background-position-x CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by background-origin.
background-position-x css reference