CSS shorthand for positioning

Vitim.us picture Vitim.us · Jun 1, 2012 · Viewed 27k times · Source

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; 

Answer

Sampson picture Sampson · Jun 1, 2012

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.