CSS shorthand for positioning

CssCss Position

Css Problem Overview


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 Solutions


Solution 1 - Css

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.

Solution 2 - Css

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

Solution 3 - Css

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;
}

Solution 4 - Css

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

Solution 5 - Css

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;
}

Solution 6 - Css

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/

Solution 7 - Css

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVitim.usView Question on Stackoverflow
Solution 1 - CssSampsonView Answer on Stackoverflow
Solution 2 - CssAdam SparksView Answer on Stackoverflow
Solution 3 - CssDave HaighView Answer on Stackoverflow
Solution 4 - CssMattia AstorinoView Answer on Stackoverflow
Solution 5 - CssT.PraveenView Answer on Stackoverflow
Solution 6 - CssAndrewView Answer on Stackoverflow
Solution 7 - CssKaran BadhwarView Answer on Stackoverflow