Generally, the believe about CSS is that no matter what order your property or value declaration comes in a selector, it is the same.

In other words, thus;

*{
margin: 0;

padding; 0;
}

is the same as

*{
padding: 0;

margin; 0;
}

But this is not always so.

Let’s take a look at borders;

The declarations for borders looks something like this;

.bordered{
  border: 1px solid #000;
  }

If you are however interested in just the top and bottom border, you may want to go this way;

.bordered{
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  }

There is however a short-cut to that. A better way to go should be;

.bordered{
  border: solid #000;
  border-width: 1px 0;

/* the 1px is for top & bottom, while 0 is for left & right  */
  }

And that is where the order (which of ‘border’ & ‘border-width’ comes first) matters. If the ordering is reversed (as shown below), it won’t work as expected.

.bordered{
  border-width: 1px 0;

border: solid #000;

}