CSS: same rule, are properties always run in order?

Question

There are tons of questions and answers about rules precedence. The question here is about the execution by the browsers of CSS properties within the same rule.

Intuitively, I've always considered that properties of a rule are run in order, by the browser.

For instance,

  #somediv {
    margin:0;
    margin-bottom:10px;
  }

is rendered as margin:0 0 10px 0; (and never margin:0;) in the browsers I use (recent Chrome, FF and Safari, basically). Meaning the second property margin-bottom overrides the previous margin property (that sets all margins to be 0).

But can I consider this to be always true, in all browsers (IE, I'm looking at you)?

Answer 1

Yes, this is expected behavior, and part of the cascade in CSS. You're simply overriding one of the components of the margin shorthand with an individual margin-bottom value.

Note that it does not erase the entire margin shorthand declaration completely! Remember that the shorthand you have above can be rewritten as either this:

margin: 0 0 0 0;

Or this:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

So margin-bottom: 10px will simply override the margin-bottom above.

Note also that IE6 and older will not give precedence to !important declarations within the same rule (but it will honor them in separate rules). But since that's an ancient browser, there's not much of a concern to be honest. This fundamental rule has been well-defined and unchanged for more than 15 years, so browsers have had ample time to implement it correctly and no excuse to fudge it, IE included.