Is there a way to make the following CSS code more compact and clean?
.offset-0 p.artist { padding-top: 165px; }
.offset-25 img { margin-top: -25px; }
.offset-25 p.artist { padding-top: 140px; }
.offset-50 img { margin-top: -50px; }
.offset-50 p.artist { padding-top: 115px; }
.offset-75 img { margin-top: -75px; }
.offset-75 p.artist { padding-top: 90px; }
.offset-100 img { margin-top: -100px; }
.offset-100 p.artist { padding-top: 65px; }
.offset-125 img { margin-top: -125px; }
.offset-125 p.artist { padding-top: 40px; }
.offset-150 img { margin-top: -150px; }
.offset-150 p.artist { padding-top: 15px; }
.offset-175 img { margin-top: -175px; }
.offset-175 p.artist { padding-top: -10px; }
.offset-200 img { margin-top: -200px; }
.offset-200 p.artist { padding-top: -35px; }
Advertisement
Answer
There is no way to make that CSS more compact using pure CSS. However, you can use a framework/plugin such as SASS/SCSS or Less to do so. Frameworks/plugins are the only options, as the CSS you have currently giving different values to different elements within elements with different classes.