Can I set all offset sides in CSS at once?

Question

Instead of having:

right:0px;
left:0px;
top:0px;
bottom:0px;

Can I have something like this?

sides:0px;

Answer 1

No, there does not exist a shorthand sides property for setting the offsets. You have to set them all separately.

There are shorthands for other kinds of properties that involve the sides of a box, e.g. margin, padding and border, but not for the positional offsets top, right, bottom and left.

Answer 2

If you're using a preprocessor such as LESS or Sass, then yes, you can. If you're using vanilla CSS, then no, not yet.

Example in LESS

.sides (@length) {
  top: @length;
  bottom: @length;
  left: @length;
  right: @length;
}
div {
  .sides(0px);
}

Example in Sass

@mixin sides($length) {
  top: $length;
  bottom: $length;
  left: $length;
  right: $length;
}
div {
 @include sides(0px);
}