Day 3: logical property shorthands

posted on 28.09.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.

If you use a shorthand property like margin with all 4 values, the properties will always be applied in the direction top - right - bottom - left, no matter the reading direction.

<button>Physical margin</button>
<button dir="rtl">Physical margin rtl</button>

button {
  margin: 20px 40px 10px 100px;
}

/*
LTR: 20px 40px 10px 100px
RTL: 20px 40px 10px 100px
*/

This might be desired, but it could also happen that you want margin to respect the reading direction. Logical Properties introduce 2 new shorthand properties, margin-inline and margin-block. These properties take 1 or 2 values.

.logical {
  margin-inline: 5rem; /* start and end value (= left and right) */
  margin-block: 5rem; /* start and end value (= top and bottom) */
  margin-inline: 1rem 2rem; /* start / end value (= left / right in ltr) */
  margin-block: 3rem 4rem; /* start / end value (= top / bottom in ltr) */
}

Unlike margin, margin-inline and margin-block respect the reading direction.

<button>Logical margin</button>
<button dir="rtl">Logical margin rtl</button>

button {
  margin-inline: 100px 40px; /* 100px = start/left, 40px = end/right */
  margin-block: 20px 10px; /* 20px = start/top, 10px = end/bottom */
}

/*
LTR: 20px 40px 10px 100px
RTL: 20px 100px 10px 40px
*/

See on CodePen

Day 3: logical property shorthands

Further reading