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.


/* Padding all sides */
.pad-1{padding: clamp(0.75rem, 0.6923rem + 0.2564vw, 1rem);}
.pad-2{padding: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);}
.pad-3{padding: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);}
.pad-4{padding: clamp(3rem, 2.7692rem + 1.0256vw, 4rem);}

/* Padding Top & Bottom */
padding-top: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);
padding-bottom: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);}
padding-top: clamp(1rem, 0.76915rem + 1.026vw, 2rem);
padding-bottom: clamp(1rem, 0.76915rem + 1.026vw, 2rem);}
padding-top: clamp(2rem, 1.76915rem + 1.026vw, 3rem);
padding-bottom: clamp(2rem, 1.76915rem + 1.026vw, 3rem);}
padding-top: clamp(3rem, 2.76915rem + 1.026vw, 4rem);
padding-bottom: clamp(3rem, 2.76915rem + 1.026vw, 4rem);}
padding-top: clamp(4rem, 3.76915rem + 1.026vw, 5rem);
padding-bottom: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
padding-top: clamp(5rem, 4.76915rem + 1.026vw, 6rem);
padding-bottom: clamp(5rem, 4.76915rem + 1.026vw, 6rem);}
padding-top: clamp(7rem, 6.76915rem + 1.026vw, 8rem);
padding-bottom: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}
padding-top: clamp(9rem, 8.76915rem + 1.026vw, 10rem);
padding-bottom: clamp(9rem, 8.76915rem + 1.026vw, 10rem);}