Is there a way to inherit only one element of CSS shorthand

Question

A quick question from a css newbie here. I'm trying to reduce the size of my CSS files by using shorthand for certain properties such as padding/margins/etc. In certain cases I want to, for example, specify margin-top, margin-left, and margin-bottom, but inherit margin-right. I tried

margin: 10px inherit 11px 12px; 

but that doesn't work because the CSS inherit keyword inherits all or nothing.

Is there a way to mark that one as skipped and do something like

margin: 10px    11px 12px; margin-right: inherit; 

and have CSS know that I am skipping one value in a 4-value shorthand, and not interpret it as a 3-value shorthand?

Does anyone know an easy way to get this to work? Or should I just use long-hand in cases where I don't specify all four values? Thanks!

Answer 1

If you overwrite the value, the last declaration will be ignored, so you can just do this:

element {     margin: 10px 0 11px 12px;     margin-right: inherit; } 

...where "0" here can be any value  * ^{see below}.

This will not work as you expect:

margin: 10px    11px 12px; 

That would actually produce these values:

margin-top: 10px; margin-right: 11px; margin-bottom: 12px; margin-left: 11px; /* copied from margin-right's value since it's missing */ 

Just in case, note that inherit takes whatever value is applied to the parent element, and does not "reset" it to a "default" as is commonly thought. So, if it's an immediate child of something with margin-right:100px, it will inherit that value. It's a rare case you actually want to inherit a property like margin, you may be thinking it does something that it really doesn't.

EDIT: As I said in the comment, I wasn't aware of not being able to use inherit in shorthand (at the very least, for margin) until you brought this question up. I'm getting some rather strange results here, and I honestly don't know what to make of it: http://jsfiddle.net/fpHb9/1/

So, until someone else can come along and provide a better understanding of this behavior, be careful with this. It might be better to just explicitly set the margin.

EDIT2: I think I solved the mystery in the demo. I don't have reference handy, but it seems that since inherit is invalid in shorthand, using it will invalidate the entire declaration. So something like this will not work as expected:

margin:20px inherit 20px 20px; /* this line gets ignored completely */ margin-right:inherit; 

So, to amend my previous statement:

...where "0" here can be any valid margin width value as documented here:
http://www.w3.org/TR/CSS2/box.html#margin-properties.

Forgive me for the long winded answer, you aroused my curiosity as to how this works (or doesn't work).