Ready to use Margins & Paddings Functions for less

.margin0 {margin: 0px !important;} .padding0 {padding: 0px !important;} // margin top .margin-top (@margin) {margin-top:@margin !important;} .margin-top0 {.margin-top(0px);} .margin-top10 {.margin-top(10px);} .margin-top20 {.margin-top(20px);} .margin-top30 {.margin-top(30px);} .margin-top40 {.margin-top(40px);} .margin-top50 {.margin-top(50px);} .margin-top60 {.margin-top(60px);} .margin-top70 {.margin-top(70px);} .margin-top80 {.margin-top(80px);} .margin-top90 {.margin-top(90px);} .margin-top100 {.margin-top(100px);} .margin-top110 {.margin-top(110px);} .margin-top120 {.margin-top(120px);} // margin left .margin-left (@margin) {margin-left:@margin !important;} .margin-left0 {.margin-left(0px);} .margin-left10 {.margin-left(10px);} .margin-left20 {.margin-left(20px);} .margin-left30 {.margin-left(30px);} .margin-left40 {.margin-left(40px);} .margin-left50 {.margin-left(50px);} .margin-left60 {.margin-left(60px);} .margin-left70 {.margin-left(70px);} .margin-left80 {.margin-left(80px);} .margin-left90 {.margin-left(90px);} .margin-left100 {.margin-left(100px);} .margin-left110 {.margin-left(110px);} .margin-left120 {.margin-left(120px);} // margin bottom .margin-bottom0 {.margin-bottom(0px);} .margin-bottom (@margin) {margin-bottom:@margin !important;} .margin-bottom10 {.margin-bottom(10px);} .margin-bottom20 {.margin-bottom(20px);} .margin-bottom30 {.margin-bottom(30px);} .margin-bottom40 {.margin-bottom(40px);} .margin-bottom50 {.margin-bottom(50px);} .margin-bottom60 {.margin-bottom(60px);} .margin-bottom70 {.margin-bottom(70px);} .margin-bottom80 {.margin-bottom(80px);} .margin-bottom90 {.margin-bottom(90px);} .margin-bottom100 {.margin-bottom(100px);} .margin-bottom110 {.margin-bottom(110px);} .margin-bottom120 {.margin-bottom(120px);} // margin right .margin-right (@margin) {margin-right:@margin !important;} .margin-right0 {.margin-right(0px);} .margin-right10 {.margin-right(10px);} .margin-right20 {.margin-right(20px);} .margin-right30 {.margin-right(30px);} .margin-right40 {.margin-right(40px);} .margin-right50 {.margin-right(50px);} .margin-right60 {.margin-right(60px);} .margin-right70 {.margin-right(70px);} .margin-right80 {.margin-right(80px);} .margin-right90 {.margin-right(90px);} .margin-right100 {.margin-right(100px);} .margin-right110 {.margin-right(110px);} .margin-right120 {.margin-right(120px);} // padding top .padding-top (@padding) {padding-top:@padding !important;} .padding-top0 {.padding-top(0px);} .padding-top10 {.padding-top(10px);} .padding-top20 {.padding-top(20px);} .padding-top30 {.padding-top(30px);} .padding-top40 {.padding-top(40px);} .padding-top50 {.padding-top(50px);} .padding-top60 {.padding-top(60px);} .padding-top70 {.padding-top(70px);} .padding-top80 {.padding-top(80px);} .padding-top90 {.padding-top(90px);} .padding-top100 {.padding-top(100px);} .padding-top110 {.padding-top(110px);} .padding-top120 {.padding-top(120px);} // padding left .padding-left (@padding) {padding-left:@padding !important;} .padding-left0 {.padding-left(0px);} .padding-left10 {.padding-left(10px);} .padding-left20 {.padding-left(20px);} .padding-left30 {.padding-left(30px);} .padding-left40 {.padding-left(40px);} .padding-left50 {.padding-left(50px);} .padding-left60 {.padding-left(60px);} .padding-left70 {.padding-left(70px);} .padding-left80 {.padding-left(80px);} .padding-left90 {.padding-left(90px);} .padding-left100 {.padding-left(100px);} .padding-left110 {.padding-left(110px);} .padding-left120 {.padding-left(120px);} // padding bottom .padding-bottom (@padding) {padding-bottom:@padding !important;} .padding-bottom0 {.padding-bottom(0px);} .padding-bottom10 {.padding-bottom(10px);} .padding-bottom20 {.padding-bottom(20px);} .padding-bottom30 {.padding-bottom(30px);} .padding-bottom40 {.padding-bottom(40px);} .padding-bottom50 {.padding-bottom(50px);} .padding-bottom60 {.padding-bottom(60px);} .padding-bottom70 {.padding-bottom(70px);} .padding-bottom80 {.padding-bottom(80px);} .padding-bottom90 {.padding-bottom(90px);} .padding-bottom100 {.padding-bottom(100px);} .padding-bottom110 {.padding-bottom(110px);} .padding-bottom120 {.padding-bottom(120px);} // padding right .padding-right (@padding) {padding-right:@padding !important;} .padding-right0 {.padding-right(0px);} .padding-right10 {.padding-right(10px);} .padding-right20 {.padding-right(20px);} .padding-right30 {.padding-right(30px);} .padding-right40 {.padding-right(40px);} .padding-right50 {.padding-right(50px);} .padding-right60 {.padding-right(60px);} .padding-right70 {.padding-right(70px);} .padding-right80 {.padding-right(80px);} .padding-right90 {.padding-right(90px);} .padding-right100 {.padding-right(100px);} .padding-right110 {.padding-right(110px);} .padding-right120 {.padding-right(120px);}
This snippet will generate margin & padding top | left | bottom | right CSS with the gap of 10px.

Code improvement suggestions are welcome.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.