30

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!

1
  • 1
    I was actually unaware that inherit won't work in shorthand for margin until I tried it. Hmm, still testing and something seems awry about this...
    – Mog
    Aug 21, 2011 at 4:44

1 Answer 1

22

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).

2
  • Yes, the OP noted in his question that inherit is an all-or-nothing value.
    – BoltClock
    Aug 21, 2011 at 5:35
  • I see, I wasn't too clear on what that meant exactly. Honestly I'm still not sure, what are you referring/replying to in my post @BoltClock?
    – Mog
    Aug 21, 2011 at 5:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.