CSS shorthand for positioning

Question

There are any shorthand for top right bottom left or for width and height ?

I have a lot of css like this

#topDiv {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:100px;
}
#centerDiv {
    position:absolute;
    top:100px;
    bottom:120px;
    left:0px;
    right:0px;
}
#consoleDiv {
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:120px;
}

I would like to do anything like this

position: absolute 10px 50px 50px 100px;

or

size: 400px 200px;

CSS doesn't have that. However, you can use a CSS framework (such as LESS) to create such behavior (using Parametric Mixins). — Aziz, Jun 01 '12 at 18:12
@jasssonpet the example values was arbitrary, thanks anyway. — Vitim.us, Jun 01 '12 at 18:13

Sampson · Accepted Answer · 2021-03-10T23:22:56.830

63

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.

edited Mar 10 '21 at 23:22

answered Jun 01 '12 at 18:11

Sampson

265,109
74
539
565

Would SASS be an overkill for this ? – HelloWorldNoMore Apr 07 '16 at 22:33
@HelloWorldNoMore You could definitely use that; or roll your own solution using [PostCSS](http://postcss.org/). – Sampson Apr 07 '16 at 22:40
1

Not true anymore, checkout [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset). – Yihao Gao Mar 05 '21 at 02:27
1

@YihaoGao Inset is currently an Editor's Draft, with no support in Safari. Neat feature, but definitely should be used sparingly at this time. – Sampson Mar 10 '21 at 23:20

score 19 · Answer 2 · answered Sep 14 '17 at 15:43

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

This doesn't answer his question as he explicitly asked for css. — Yatrix, Mar 22 '19 at 17:50

score 8 · Answer 3 · answered Jun 01 '12 at 18:23

8

The answer is no as they are different properties so can not be combined. You can however consolidate your css a little bit rather than repeating certain properties, e.g:

#topDiv,
#centerDiv,
#consoleDiv {
    position:absolute;
    left:0;
    right:0;
}
#topDiv {
    top:0;
    height:100px;
}
#centerDiv {
    top:100px;
    bottom:120px;
}
#consoleDiv {
    bottom:0;
    height:120px;
}

answered Jun 01 '12 at 18:23

Dave Haigh

4,369
5
34
56

doesn't directly answer the question of combining directional properties with a position property, which is something that will probably never happen in CSS – Mattia Astorino Apr 15 '20 at 14:36

Mattia Astorino · Answer 4 · 2020-04-15T14:30:32.030

2

inset is what you can use in 2020 as positioning shorthand, but you need to use PostCSS and this plugin https://github.com/jonathantneal/postcss-inset

Example:

.example {
  inset: 10px 20px 80px;
}

/* becomes */

.example {
  top: 10px;
  right: 20px;
  bottom: 80px;
  left: 20px;
}

More info and spec here: https://www.w3.org/TR/css-logical-1/#propdef-inset

edited Apr 15 '20 at 14:30

answered Apr 15 '20 at 14:21

Mattia Astorino

1,396
14
18

1

Actually you can't use inset anywhere outside of Firefox right now, and that spec is only a working draft, so you shouldn't be using this property even for production Firefox sites yet. This also doesn't directly answer the question of combining directional properties with a position property, which is something that will probably never happen in CSS. – TylerH Apr 15 '20 at 14:26
1

A lot of things implemented by browsers are working draft and editors draft. Anyway, like people use SASS for everything, you can use PostCSS with a bunch of js lines and start using this with a plugin https://github.com/jonathantneal/postcss-inset – Mattia Astorino Apr 15 '20 at 14:29
1

Keep checking browser compatibility. It's documented at https://developer.mozilla.org/en-US/docs/Web/CSS/inset – Shawn Spencer Oct 05 '20 at 20:14

score 1 · Answer 5 · answered Jan 15 '22 at 08:10

1

you can use inset: top right bottom left;.

#topDiv {
    position: absolute;
    inset: 0;
    min-height: 100px;
}

#centerDiv {
    position: absolute;
    inset: 100px 0 120px;
}

#consoleDiv {
    position: absolute;
    inset: auto 0 0 0;
}

answered Jan 15 '22 at 08:10

T.Praveen

49
4

score 0 · Answer 6 · answered Jun 10 '15 at 19:22

If you want shorthand for this, you're gonna need to make what's called a mixin with Sass. Don't know what it is? Look it up!

@mixin position($position, $args) {
  @each $o in top right bottom left {
        $i: index($args, $o);

    @if $i and $i + 1< = length($args) and type-of(nth($args, $i + 1)) == number  {
          #{$o}: nth($args, $i + 1);
    }
  }

  position: $position;
}

@mixin absolute($args) {
        @include position("absolute", $args);
}

@mixin fixed($args) {
        @include position("fixed", $args);
}

@mixin relative($args) {
        @include position("relative", $args);
}

Here's a link that explains it:

http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/

doesn't directly answer the question of combining directional properties with a position property, which is something that will probably never happen in CSS — Mattia Astorino, Apr 15 '20 at 14:35

score 0 · Answer 7 · answered Mar 16 '22 at 22:59

0

It is better to use Inset link to inset MDN page here

answered Mar 16 '22 at 22:59

Karan Badhwar

27
6

Welcome to the comunity. Please notice somebody else already posted inset as a solution. Also, when answering a question, please avoid "Link answers" like yours. An answer should be elaborated and explanatory. For example, in this case, an example of use would have improve your answer a lot. – Òscar Raya Mar 22 '22 at 13:21
oh, I am sorry about that, will take of this from now onwards @ÒscarRaya – Karan Badhwar Mar 22 '22 at 16:01

CSS shorthand for positioning

7 Answers7

Linked

Related