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

Accepted Answer

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.

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

Solution

Problem