How to use shorthand without setting particular values?

HTML-CSS
1

Hey everyone :waving_hand:

I’m interested in knowing if it’s possible to use a CSS shorthand (e.g.padding: 10px 20px 30px 40px), but without setting certain values. For example:

#element {
    padding: 50px;
}

#element {
    padding: 10px as-is 20px as-is;
}

In this example, the properties assigned as-is (which is something I made up, not a real CSS value) would have whatever value they would have had if this style rule were never made. In this case, that would mean that #element would have these values:

padding-top:10px,
padding-bottom: 20px,
padding-left and padding-right: 50px

I’m aware that explicit defaulting keywords exist, namely initial, inherit, unset, revert, revert-layer, and revert-rule. I admittedly don’t really understand their nuances, but I get the general idea, so I tried them out.

They all seemed to produce the same result in this case: cancelling the entire rule. For example, if I tried

#element {
    padding: 50px;
}

#element {
    padding: 10px unset 20px unset;
}

the element would have 50px of padding on all sides, indicating that unset cancels the whole rule, not just the part(s) it’s applied to. The same happened with the other five.

Is there a way to do what I’m trying to do here? I understand I could easily just do

#element {
    padding-top: 10px;
    padding-bottom: 20px;
}

and move on with my life, but that’s not really the point. I’m trying to see if it can be done in shorthand.

Thanks in advance! :grinning_face_with_smiling_eyes:

2

it does not look like it’s possible, if you want to change padding only on certain sides you must use the extended rules

3

That’s a shame, but fair enough. Thanks!