Skip properties in CSS shorthand for padding, margin, etc

Question

Is there a way to specify a CSS property is skipped in the shorthand, with padding, border, margin, etc.

Like padding: <skipped> 1em 2em instead of:

padding-right: 1em
padding-bottom: 2em

Mortgagor

Answer 1

I think your best bet is to assign the value auto though that will only set it to any default [browser] value it may have, I'm guessing that for padding it will reset it to 0 [depending on the element].

Other than that, no.

Canaan

Upvoted for parity. I can't see what's wrong with this at all. – Mortgagor

Answer 2

The correct way to skip properties is to not use shorthand:

padding-bottom: 2em;
padding-right: 1em;

It's not as elegant as:

padding: same 1em 2em same;

but it simply doesn't exist in pure CSS. If you use server-side CSS extensions such as LESS or SASS, there may be syntax to do that; if there isn't, it could be added with relative ease.

Sauers

There isn't and it's not that simple as you must considder attributes can be added to an element by different classes and LESS/SASS have no knowledge of your HTML. It may seem ugly but padding-right: 1em; padding-bottom: 2em is really the only way. – Canaan

@sg3s, LESS/SASS would only have to convert padding: same 1em 2em same; to padding-bottom: 2em; padding-right: 1em;, just like they convert .foo { .bar {...} .baz {...} } to .foo .bar {...} .foo .baz {...} – Sauers

hmmm good point... that makes me itch to just submit the needed code to some gitrepos since thats really simple... – Canaan

Yes, there's no intrinsic reason why the shorthand can't support it. It does already support this behaviour if you include 3 properties (ie it skips over the fourth one, padding-left). – Mortgagor

... And for that reason, I'd want to use same 1em 2em. The same on the end is already unnecessary by the existing CSS convention. – Mortgagor

@mahemoff, it doesn't do that behavior if you skip the 4th. padding: 1em 2em 3em; is the same as padding-top: 1em; padding-left: 2em; padding-right: 2em; padding-bottom: 3em; It reuses the second value for the left and right sides, which is different than leaving them alone. – Sauers

As a general note, I was on the fence about what to call the keyword (auto and inherit are obviously taken). Some of the thoughts I had were as-is, same, ~, =, @ and prev. If anyone does go on to add this feature to a gitrepo, take care to choose the best keyword. – Sauers

@Sauers True about not skipping 4th, so it's not something done in standard CSS. "as-is" would be clear. I'd want to avoid "same", it comes across like "same as the other attributes here" (at least, if it appeared after the others). – Mortgagor

is there any change since 2012, or still there is no possibility to set skipped values for shorthand? – Retainer