Entry 02

Logical properties

Use them in place of every left, right, top and bottom, in spacing, borders, offsets and alignment.

The second card is the mirror image of the first: border, text and close button all swap sides.

Code CSS · 13 lines

.card {
  position: relative;
  padding-inline: 1.5rem;
  margin-block-end: 2rem;
  border-inline-start: 4px solid;
  text-align: start;
}

.card .close {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

Why it works, the rules and the credits 1 reason · 1 rule · support · credits

Why it works

inline is the direction text runs and block the direction blocks stack. Start and end follow dir and writing-mode, so one set of declarations renders mirrored in a right-to-left page.

Rules

The four-value margin, padding and inset shorthands stay physical. Use the -inline and -block shorthands.

Support

Chrome: 87
Firefox: 66
Safari: 14.1

Credits

Borrowed from: Ahmad Shadeed, Digging Into CSS Logical Properties, 2021-03-10