CSS: Simple top and bottom margin hack.

Most of the web designers use very brilliant frameworks for setting up the UI, like Bootstrap, Foundation, etc. These frameworks save your great time, no doubt. Few days ago, working with Bootstrap, I observed that, though it has smart fluid grid, sometimes you have to set an element to an unusual position. You may want to leave a little top or bottom margin to a div, for example.

Bootstrap comes up with an offset option, which allows you to set the position of an element by few left or right margins. But by top and bottom margin? Nope! Bootstrap doesn't give you anything for top and bottom margins. Obviously, it is not much important when your elements are getting stacked nicely.

So, within few free minutes of my so-called "relaxing" web design work schedule (which my boss thinks I  have), I wrote a CSS, which you may find stupid, which includes 200 classes. Hundred for margin-top:0 to margin-top:100px, and same for margin-bottom

Sample Code

@charset "utf-8";
/* CSS Docu.ment */
.margintop1{margin-top:1px;}
.margintop2{margin-top:2px;}
.margintop3{margin-top:3px;}
.margintop4{margin-top:4px;}
.margintop5{margin-top:5px;}
.margintop6{margin-top:6px;}
.margintop7{margin-top:7px;}
.margintop8{margin-top:8px;}
.margintop9{margin-top:9px;}
.margintop10{margin-top:10px;}
 
Yes, you can see how stupid that is to write some line 200 times. But later this helped me, as I went on calling these classes into my templates, so that I don't need to write individual margin property in respective CSS.

Download margin.css