Can I define <anything already been> in CSS? - html

Question

Here is my code:
.el {
padding-top: 20px;
}
#media (max-width: 979px) {
.el{
padding: <anything already been> 10px 10px 10px;
}
}
Is there something to use as <anything already been> ?
I can do that like this:
#media (max-width: 979px) {
.el{
padding-right: 10px;
padding-left: 10px;
padding-buttom: 10px;
}
}
But I just like to know is there any approach to do that in one line?

Answer 1

I'm going to state that no, it is not possible.
Inherit would be the sufficient replacement, but this cannot be achieved because inherit counts for all 4 properties of the shorthand. You cannot semi-overrule part of it by entering inherit randomly.
Besides, with padding, it will always be converted from padding to padding-top, padding-left etc etc. Which will (as #Pete stated) overrule the original value everytime.
You should stick with your second approach:
#media (max-width: 979px) {
.el{
padding-right: 10px;
padding-left: 10px;
padding-buttom: 10px;
}
}

Answer 2

Theres no way to do what you want to do. You could get something closeish with custom properties to achieve this.
For example:
.el {
--paddingTop: 20px;
padding: var(--paddingTop, 0) var(--paddingRight, 0) var(--paddingBottom, 0) var(--paddingLeft, 0);
}
#media (max-width: 979px) {
.el{
--paddingRight: 10px;
--paddingBottom: 20px;
--paddingLeft: 20px;
}
}
This would be fine to use on 1 off situations but would give you way too much overhead to want to do this everywhere imo.