CSS shorthand for positioning

2021 Update: The inset property is currently gaining adoption. This property uses the same multi-value syntax as the shorthand margin property. For browser compatibility, please see MDN.


No short-hand exists to combine all of these values. These are all different properties, unlike, for instance background, which has colors, images, positions and repeat instructions and as such can be coalesced into a short-hand form.

If you really wanted this type of control, you could use something like SASS and create a mixin.


I just found this, was looking for the same, I ended up using sass for top, bottom, left, right

here is my solution

@mixin position($top, $right: $top, $bottom: $top, $left: $right) {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
 }

works like most css shorthands

@include position(5) // all 4

@include position(5,4) // vertical, horizontal

@include position(5,4,3) // top, horizontal, bottom

@include position(5,4,3,2) // top, right, bottom, left