Is there a way to make the following CSS code more compact and clean?
JavaScript
x
18
18
1
.offset-0 p.artist { padding-top: 165px; }
2
.offset-25 img { margin-top: -25px; }
3
.offset-25 p.artist { padding-top: 140px; }
4
.offset-50 img { margin-top: -50px; }
5
.offset-50 p.artist { padding-top: 115px; }
6
.offset-75 img { margin-top: -75px; }
7
.offset-75 p.artist { padding-top: 90px; }
8
.offset-100 img { margin-top: -100px; }
9
.offset-100 p.artist { padding-top: 65px; }
10
.offset-125 img { margin-top: -125px; }
11
.offset-125 p.artist { padding-top: 40px; }
12
.offset-150 img { margin-top: -150px; }
13
.offset-150 p.artist { padding-top: 15px; }
14
.offset-175 img { margin-top: -175px; }
15
.offset-175 p.artist { padding-top: -10px; }
16
.offset-200 img { margin-top: -200px; }
17
.offset-200 p.artist { padding-top: -35px; }
18
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.