Is there a css function that allows me to set the values of top, right, bottom, and left for position all in one line?

user_11363789 0
Viewed 428

Not sure, but I seem to recall that there was a way to represent the values of top, right, down, left of positioning in css, like this format: positioning: top right bottom left, much like the order of a clock (clockwise). Ex: Positioning: 10px 20px 10px 30px;

As an alternative to setting the positions in this way?

<style>
body {
position: relative;
top: 10px;
right: 20px;
bottom: 10px;
left: 30px;
}
</style>

Can anyone help me figure out what I am recalling?

css html
1 Answers

yes, it's called inset

This shorthand property sets the top, right, bottom, and left properties. Values are assigned to its sub-properties as for margin. ref

.box {
  position:fixed;
  inset:20px 50px 50% 10px;
  /*
  top:20px;
  right:50px;
  bottom:50%;
  left:10px;
  */
  background:red;
}
<div class="box">

</div>

If you read the specification I linked you will also find more sub properties related to inset called Flow-relative Offsets

The top, left, bottom, right physical properties, their inset-block-start, inset-block-end, inset-inline-start, inset-inline-end flow-relative correspondants, and the inset-block, inset-inline, and inset shorthands, are collectively known as the inset properties.

CSS introduces the concept of flow-relative property/value to make it easier to deal with different writing modes and directions:

Related: What is the difference between margin-block-start and margin-top?

We can also transform existing property to become relative using the logical keyword

The shorthand properties for margin, padding, and border set values for physical properties by default. But authors can specify the logical keyword at the beginning of the property value to indicate that the values map to the flow-relative properties instead of the physical ones.

This one is still far from having any support: https://github.com/w3c/csswg-drafts/issues/1282

user_86203330
Related