Question

It seems to me like the two item standard for most CSS properties is “top/bottom, left/right”. At least, that’s the case for everything I know of except border-spacing.

Is the “left/right, top/bottom” shorthand for border-spacing intentional? It gets me every time, and perhaps w3 didn’t notice it was inconsistent.

Answer 1

This is a little different because unlike things such as border-width or margin, only two values are accepted:

border-width: 10px 50px 10px 50px; /* valid */
border-spacing: 10px 50px 10px 50px; /* invalid */

You can probably chalk it up to this difference.

Whenever you see this shorthand for other properties that accept (up to) 4 values:

border-width: 10px 50px;

It just means that the bottom and left values are copied from the other side:

border-width: 10px 50px 10px 50px;
/*            top  right btm left    */

Or with three values:

border-width: 10px 50px 20px;

This is equal to:

border-width: 10px 50px 20px 50px;