Day 9: the inset shorthand property

posted on 06.10.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

The inset property is a shorthand for the top, right, bottom, and/or left properties. It implements the same multi-value syntax like margin.

<div class="parent">
  <div class="child">
    At bottom right with 20px offset
  </div>
</div>

.parent {
  width: 12rem;
  height: 12rem;
  position: relative;
}

.child {
  position: absolute;
  /* top: auto; right: 20px; bottom: 20px; left: auto */
  inset: auto 20px 20px auto;
  width: 50%;
  height: 50%;
}

At bottom right with 20px offset

Just like margin, inset does not respect the reading direction. To work around that, use the inset-inline and inset-block shorthands.

.child {
  position: absolute;
  /* top: auto; bottom: 20px; in ltr */
  inset-block: auto 20px;
  /*  left: auto; right: 20px; in ltr */
  inset-inline: auto 20px;
}

<div class="parent" dir="rtl">
  <div class="child">
    At bottom right with 20px offset
  </div>
</div>

At bottom right with 20px offset

Are these shorthands useful? I don't know. I'll cover some use cases later in the series, but I wasn't able to come up with many scenarios where inset makes things much easier.

See on CodePen

Day 9: the inset shorthand property

Further reading