Logical Properties for Useful Shorthands

Michelle Barker has published a short, practical post on CSS logical property shorthands — specifically those that set lengths on a single axis, such as only the block (vertical) axis or just the inline (horizontal) axis.

The terms “block” and “inline” matter here because, with logical properties, the x-axis could behave like a vertical axis depending on the current writing-mode. Where we’ve always had padding, margin, and border shorthands that support multi-value syntax, none of them let us declare lengths on a specific axis without also setting a length on the other axis.

For example, you could write:

/* This gives us margin on the inline axis */
margin: 0 3rem;

…but that required setting the other axis to get there. With logical properties, however, we get additional shorthands for each axis, like margin-inline, which works specifically on the inline axis:

margin-inline: 3rem;

Michelle also mentions a favorite shorthand in passing: positioning something to this sort of tune:

.position-me {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Those four lines can collapse into inset: 0. Or, you can target the block and inline axes directly with inset-block and inset-inline, respectively.

Speaking of shorthands, a word of caution applies about “accidental” CSS resets — one of the common CSS mistakes worth avoiding.

Direct Link →