Padding Classes

Global padding classes to work a lot faster

In this post you can see and copy all the classes that I use for my websites to make adding padding faster and global since it isn’t possible with Elementor yet to create and use classes.

				
					/*Clases Padding*/

/* PADDING ALL SIDES */
.pad-s {padding: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);}
.pad-m {padding: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);}
.pad-l {padding: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);}

/* PADDING LEFT AND RIGHT */
.pad-lr-s {padding-left: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem); padding-right: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);}
.pad-lr-m {padding-left: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem); padding-right: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);}
.pad-lr-l {padding-left: clamp(2rem, 1.7692rem + 1.0256vw, 3rem); padding-right: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);}
.pad-l-s {padding-left: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);}
.pad-l-m {padding-left: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);}
.pad-l-l {padding-left: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);}
.pad-r-s {padding-right: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);}
.pad-r-m {padding-right: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);}
.pad-r-l {padding-right: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);}

/* PADDING TOP & BOTTOM */
.pad-tb-s {padding-top: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem); padding-bottom: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem);}
.pad-tb-m {padding-top: clamp(4rem, 3.76915rem + 1.026vw, 5rem); padding-bottom: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
.pad-tb-l {padding-top: clamp(7rem, 6.76915rem + 1.026vw, 8rem); padding-bottom: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}
.pad-t-s {padding-top: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem);}
.pad-t-m {padding-top: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
.pad-t-l {padding-top: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}
.pad-b-s {padding-bottom: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem);}
.pad-b-m {padding-bottom: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
.pad-b-l {padding-bottom: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}

/*FIN Clases Padding*/