Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/derekbtw/marginal

CSS margins & padding made easy.
https://github.com/derekbtw/marginal

Last synced: about 1 year ago
JSON representation

CSS margins & padding made easy.

Awesome Lists containing this project

README 

          
# marginal

CSS margins & padding made easy.



Website and Demo: http://labs.struck.io/marginal



It's pretty simple, really. The class names are easy to remember and are very short. If you want a right margin

of 50 just use .mr50, if you want a negative left margin of 25 use .ml-25. You can do

the same thing with padding as well using something like .pr95.



## Quick Start



```html



```

      

## Useage



```html



  


  




```

```html



  


  




```

```html



  




```



## CSS



```css

/* margin */

.m1 {margin:1px;}

.m2 {margin:2px;}

.m3 {margin:3px;}

.m4 {margin:4px;}

.m5 {margin:5px;}

.m6 {margin:6px;}

.m7 {margin:7px;}

.m8 {margin:8px;}

.m9 {margin:9px;}

.m10 {margin:10px;}

.m15 {margin:15px;}

.m20 {margin:20px;}

.m25 {margin:25px;}

.m30 {margin:30px;}

.m35 {margin:35px;}

.m40 {margin:40px;}

.m45 {margin:45px;}

.m50 {margin:50px;}

.m55 {margin:55px;}

.m60 {margin:60px;}

.m65 {margin:65px;}

.m70 {margin:70px;}

.m75 {margin:75px;}

.m80 {margin:80px;}

.m85 {margin:85px;}

.m90 {margin:90px;}

.m95 {margin:95px;}

.m100 {margin:100px;}



/* negative margin */

.m-1 {margin:-1px;}

.m-2 {margin:-2px;}

.m-3 {margin:-3px;}

.m-4 {margin:-4px;}

.m-5 {margin:-5px;}

.m-6 {margin:-6px;}

.m-7 {margin:-7px;}

.m-8 {margin:-8px;}

.m-9 {margin:-9px;}

.m-10 {margin:-10px;}

.m-15 {margin:-15px;}

.m-20 {margin:-20px;}

.m-25 {margin:-25px;}

.m-30 {margin:-30px;}

.m-35 {margin:-35px;}

.m-40 {margin:-40px;}

.m-45 {margin:-45px;}

.m-50 {margin:-50px;}

.m-55 {margin:-55px;}

.m-60 {margin:-60px;}

.m-65 {margin:-65px;}

.m-70 {margin:-70px;}

.m-75 {margin:-75px;}

.m-80 {margin:-80px;}

.m-85 {margin:-85px;}

.m-90 {margin:-90px;}

.m-95 {margin:-95px;}

.m-100 {margin:-100px;}



/* margin top */

.mt1 {margin-top:1px;}

.mt2 {margin-top:2px;}

.mt3 {margin-top:3px;}

.mt4 {margin-top:4px;}

.mt5 {margin-top:5px;}

.mt6 {margin-top:6px;}

.mt7 {margin-top:7px;}

.mt8 {margin-top:8px;}

.mt9 {margin-top:9px;}

.mt10 {margin-top:10px;}

.mt15 {margin-top:15px;}

.mt20 {margin-top:20px;}

.mt25 {margin-top:25px;}

.mt30 {margin-top:30px;}

.mt35 {margin-top:35px;}

.mt40 {margin-top:40px;}

.mt45 {margin-top:45px;}

.mt50 {margin-top:50px;}

.mt55 {margin-top:55px;}

.mt60 {margin-top:60px;}

.mt65 {margin-top:65px;}

.mt70 {margin-top:70px;}

.mt75 {margin-top:75px;}

.mt80 {margin-top:80px;}

.mt85 {margin-top:85px;}

.mt90 {margin-top:90px;}

.mt95 {margin-top:95px;}

.mt100 {margin-top:100px;}



/* negative margin top */

.mt-1 {margin-top:-1px;}

.mt-2 {margin-top:-2px;}

.mt-3 {margin-top:-3px;}

.mt-4 {margin-top:-4px;}

.mt-5 {margin-top:-5px;}

.mt-6 {margin-top:-6px;}

.mt-7 {margin-top:-7px;}

.mt-8 {margin-top:-8px;}

.mt-9 {margin-top:-9px;}

.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;}

.mt-40 {margin-top:-40px;}

.mt-45 {margin-top:-45px;}

.mt-50 {margin-top:-50px;}

.mt-55 {margin-top:-55px;}

.mt-60 {margin-top:-60px;}

.mt-65 {margin-top:-65px;}

.mt-70 {margin-top:-70px;}

.mt-75 {margin-top:-75px;}

.mt-80 {margin-top:-80px;}

.mt-85 {margin-top:-85px;}

.mt-90 {margin-top:-90px;}

.mt-95 {margin-top:-95px;}

.mt-100 {margin-top:-100px;}



/* margin right */

.mr1 {margin-right:1px;}

.mr2 {margin-right:2px;}

.mr3 {margin-right:3px;}

.mr4 {margin-right:4px;}

.mr5 {margin-right:5px;}

.mr6 {margin-right:6px;}

.mr7 {margin-right:7px;}

.mr8 {margin-right:8px;}

.mr9 {margin-right:9px;}

.mr10 {margin-right:10px;}

.mr15 {margin-right:15px;}

.mr20 {margin-right:20px;}

.mr25 {margin-right:25px;}

.mr30 {margin-right:30px;}

.mr35 {margin-right:35px;}

.mr40 {margin-right:40px;}

.mr45 {margin-right:45px;}

.mr50 {margin-right:50px;}

.mr55 {margin-right:55px;}

.mr60 {margin-right:60px;}

.mr65 {margin-right:65px;}

.mr70 {margin-right:70px;}

.mr75 {margin-right:75px;}

.mr80 {margin-right:80px;}

.mr85 {margin-right:85px;}

.mr90 {margin-right:90px;}

.mr95 {margin-right:95px;}

.mr100 {margin-right:100px;}



/* negative margin right */

.mr-1 {margin-right:-1px;}

.mr-2 {margin-right:-2px;}

.mr-3 {margin-right:-3px;}

.mr-4 {margin-right:-4px;}

.mr-5 {margin-right:-5px;}

.mr-6 {margin-right:-6px;}

.mr-7 {margin-right:-7px;}

.mr-8 {margin-right:-8px;}

.mr-9 {margin-right:-9px;}

.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;}

.mr-40 {margin-right:-40px;}

.mr-45 {margin-right:-45px;}

.mr-50 {margin-right:-50px;}

.mr-55 {margin-right:-55px;}

.mr-60 {margin-right:-60px;}

.mr-65 {margin-right:-65px;}

.mr-70 {margin-right:-70px;}

.mr-75 {margin-right:-75px;}

.mr-80 {margin-right:-80px;}

.mr-85 {margin-right:-85px;}

.mr-90 {margin-right:-90px;}

.mr-95 {margin-right:-95px;}

.mr-100 {margin-right:-100px;}



/* margin bottom */

.mb1 {margin-bottom:1px;}

.mb2 {margin-bottom:2px;}

.mb3 {margin-bottom:3px;}

.mb4 {margin-bottom:4px;}

.mb5 {margin-bottom:5px;}

.mb6 {margin-bottom:6px;}

.mb7 {margin-bottom:7px;}

.mb8 {margin-bottom:8px;}

.mb9 {margin-bottom:9px;}

.mb10 {margin-bottom:10px;}

.mb15 {margin-bottom:15px;}

.mb20 {margin-bottom:20px;}

.mb25 {margin-bottom:25px;}

.mb30 {margin-bottom:30px;}

.mb35 {margin-bottom:35px;}

.mb40 {margin-bottom:40px;}

.mb45 {margin-bottom:45px;}

.mb50 {margin-bottom:50px;}

.mb55 {margin-bottom:55px;}

.mb60 {margin-bottom:60px;}

.mb65 {margin-bottom:65px;}

.mb70 {margin-bottom:70px;}

.mb75 {margin-bottom:75px;}

.mb80 {margin-bottom:80px;}

.mb85 {margin-bottom:85px;}

.mb90 {margin-bottom:90px;}

.mb95 {margin-bottom:95px;}

.mb100 {margin-bottom:100px;}



/* negative margin bottom */

.mb-1 {margin-bottom:-1px;}

.mb-2 {margin-bottom:-2px;}

.mb-3 {margin-bottom:-3px;}

.mb-4 {margin-bottom:-4px;}

.mb-5 {margin-bottom:-5px;}

.mb-6 {margin-bottom:-6px;}

.mb-7 {margin-bottom:-7px;}

.mb-8 {margin-bottom:-8px;}

.mb-9 {margin-bottom:-9px;}

.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;}

.mb-40 {margin-bottom:-40px;}

.mb-45 {margin-bottom:-45px;}

.mb-50 {margin-bottom:-50px;}

.mb-55 {margin-bottom:-55px;}

.mb-60 {margin-bottom:-60px;}

.mb-65 {margin-bottom:-65px;}

.mb-70 {margin-bottom:-70px;}

.mb-75 {margin-bottom:-75px;}

.mb-80 {margin-bottom:-80px;}

.mb-85 {margin-bottom:-85px;}

.mb-90 {margin-bottom:-90px;}

.mb-95 {margin-bottom:-95px;}

.mb-100 {margin-bottom:-100px;}



/* margin left */

.ml1 {margin-left:1px;}

.ml2 {margin-left:2px;}

.ml3 {margin-left:3px;}

.ml4 {margin-left:4px;}

.ml5 {margin-left:5px;}

.ml6 {margin-left:6px;}

.ml7 {margin-left:7px;}

.ml8 {margin-left:8px;}

.ml9 {margin-left:9px;}

.ml10 {margin-left:10px;}

.ml15 {margin-left:15px;}

.ml20 {margin-left:20px;}

.ml25 {margin-left:25px;}

.ml30 {margin-left:30px;}

.ml35 {margin-left:35px;}

.ml40 {margin-left:40px;}

.ml45 {margin-left:45px;}

.ml50 {margin-left:50px;}

.ml55 {margin-left:55px;}

.ml60 {margin-left:60px;}

.ml65 {margin-left:65px;}

.ml70 {margin-left:70px;}

.ml75 {margin-left:75px;}

.ml80 {margin-left:80px;}

.ml85 {margin-left:85px;}

.ml90 {margin-left:90px;}

.ml95 {margin-left:95px;}

.ml100 {margin-left:100px;}



/* negative margin left */

.ml-1 {margin-left:-1px;}

.ml-2 {margin-left:-2px;}

.ml-3 {margin-left:-3px;}

.ml-4 {margin-left:-4px;}

.ml-5 {margin-left:-5px;}

.ml-6 {margin-left:-6px;}

.ml-7 {margin-left:-7px;}

.ml-8 {margin-left:-8px;}

.ml-9 {margin-left:-9px;}

.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;}

.ml-40 {margin-left:-40px;}

.ml-45 {margin-left:-45px;}

.ml-50 {margin-left:-50px;}

.ml-55 {margin-left:-55px;}

.ml-60 {margin-left:-60px;}

.ml-65 {margin-left:-65px;}

.ml-70 {margin-left:-70px;}

.ml-75 {margin-left:-75px;}

.ml-80 {margin-left:-80px;}

.ml-85 {margin-left:-85px;}

.ml-90 {margin-left:-90px;}

.ml-95 {margin-left:-95px;}

.ml-100 {margin-left:-100px;}



/* padding */

.p1 {padding:1px;}

.p2 {padding:2px;}

.p3 {padding:3px;}

.p4 {padding:4px;}

.p5 {padding:5px;}

.p6 {padding:6px;}

.p7 {padding:7px;}

.p8 {padding:8px;}

.p9 {padding:9px;}

.p10 {padding:10px;}

.p15 {padding:15px;}

.p20 {padding:20px;}

.p25 {padding:25px;}

.p30 {padding:30px;}

.p35 {padding:35px;}

.p40 {padding:40px;}

.p45 {padding:45px;}

.p50 {padding:50px;}

.p55 {padding:55px;}

.p60 {padding:60px;}

.p65 {padding:65px;}

.p70 {padding:70px;}

.p75 {padding:75px;}

.p80 {padding:80px;}

.p85 {padding:85px;}

.p90 {padding:90px;}

.p95 {padding:95px;}

. p100 {padding:100px;}



/* padding top */

.pt1 {padding-top:1px;}

.pt2 {padding-top:2px;}

.pt3 {padding-top:3px;}

.pt4 {padding-top:4px;}

.pt5 {padding-top:5px;}

.pt6 {padding-top:6px;}

.pt7 {padding-top:7px;}

.pt8 {padding-top:8px;}

.pt9 {padding-top:9px;}

.pt10 {padding-top:10px;}

.pt15 {padding-top:15px;}

.pt20 {padding-top:20px;}

.pt25 {padding-top:25px;}

.pt30 {padding-top:30px;}

.pt35 {padding-top:35px;}

.pt40 {padding-top:40px;}

.pt45 {padding-top:45px;}

.pt50 {padding-top:50px;}

.pt55 {padding-top:55px;}

.pt60 {padding-top:60px;}

.pt65 {padding-top:65px;}

.pt70 {padding-top:70px;}

.pt75 {padding-top:75px;}

.pt80 {padding-top:80px;}

.pt85 {padding-top:85px;}

.pt90 {padding-top:90px;}

.pt95 {padding-top:95px;}

.pt100 {padding-top:100px;}



/* padding right */

.pr1 {padding-right:1px;}

.pr2 {padding-right:2px;}

.pr3 {padding-right:3px;}

.pr4 {padding-right:4px;}

.pr5 {padding-right:5px;}

.pr6 {padding-right:6px;}

.pr7 {padding-right:7px;}

.pr8 {padding-right:8px;}

.pr9 {padding-right:9px;}

.pr10 {padding-right:10px;}

.pr15 {padding-right:15px;}

.pr20 {padding-right:20px;}

.pr25 {padding-right:25px;}

.pr30 {padding-right:30px;}

.pr35 {padding-right:35px;}

.pr40 {padding-right:40px;}

.pr45 {padding-right:45px;}

.pr50 {padding-right:50px;}

.pr55 {padding-right:55px;}

.pr60 {padding-right:60px;}

.pr65 {padding-right:65px;}

.pr70 {padding-right:70px;}

.pr75 {padding-right:75px;}

.pr80 {padding-right:80px;}

.pr85 {padding-right:85px;}

.pr90 {padding-right:90px;}

.pr95 {padding-right:95px;}

.pr100 {padding-right:100px;}



/* padding bottom */

.pb1 {padding-bottom:1px;}

.pb2 {padding-bottom:2px;}

.pb3 {padding-bottom:3px;}

.pb4 {padding-bottom:4px;}

.pb5 {padding-bottom:5px;}

.pb6 {padding-bottom:6px;}

.pb7 {padding-bottom:7px;}

.pb8 {padding-bottom:8px;}

.pb9 {padding-bottom:9px;}

.pb10 {padding-bottom:10px;}

.pb15 {padding-bottom:15px;}

.pb20 {padding-bottom:20px;}

.pb25 {padding-bottom:25px;}

.pb30 {padding-bottom:30px;}

.pb35 {padding-bottom:35px;}

.pb40 {padding-bottom:40px;}

.pb45 {padding-bottom:45px;}

.pb50 {padding-bottom:50px;}

.pb55 {padding-bottom:55px;}

.pb60 {padding-bottom:60px;}

.pb65 {padding-bottom:65px;}

.pb70 {padding-bottom:70px;}

.pb75 {padding-bottom:75px;}

.pb80 {padding-bottom:80px;}

.pb85 {padding-bottom:85px;}

.pb90 {padding-bottom:90px;}

.pb95 {padding-bottom:95px;}

.pb100 {padding-bottom:100px;}



/* padding left */

.pl1 {padding-left:1px;}

.pl2 {padding-left:2px;}

.pl3 {padding-left:3px;}

.pl4 {padding-left:4px;}

.pl5 {padding-left:5px;}

.pl6 {padding-left:6px;}

.pl7 {padding-left:7px;}

.pl8 {padding-left:8px;}

.pl9 {padding-left:9px;}

.pl10 {padding-left:10px;}

.pl15 {padding-left:15px;}

.pl20 {padding-left:20px;}

.pl25 {padding-left:25px;}

.pl30 {padding-left:30px;}

.pl35 {padding-left:35px;}

.pl40 {padding-left:40px;}

.pl45 {padding-left:45px;}

.pl50 {padding-left:50px;}

.pl55 {padding-left:55px;}

.pl60 {padding-left:60px;}

.pl65 {padding-left:65px;}

.pl70 {padding-left:70px;}

.pl75 {padding-left:75px;}

.pl80 {padding-left:80px;}

.pl85 {padding-left:85px;}

.pl90 {padding-left:90px;}

.pl95 {padding-left:95px;}

.pl100 {padding-left:100px;}

```



Website and Demo: http://labs.struck.io/marginal