Old but new margins

Margins are not new in CSS. We have been using them for a long time, often with ‘margin’ as a shorthand for ‘margin-top’, ‘margin-bottom’, ‘margin-left’, or ‘margin-right’. However, do you also use ‘margin-block’ and ‘margin-inline’? As you might imagine ‘margin-block’ is equivalent to ‘margin-top’ and ‘margin-bottom’ while ‘margin-inline’ is the same as ‘margin-left’ and 'margin-right.

margin-block: 10px 20px;
margin-inline: 2em, 4em;

Okay, is it just another words for the same thing then? Not really, because both ‘margin-block’ and ‘margin-inline’ adjust to the element’s writing mode, directionality, and text orientation. Take a look at this.

<div>Good vibes only</div>
<div class="vertically">Good vibes only</div>

div {
  margin-inline: auto;
}

.vertically {
  writing-mode: vertical-rl;
}

In the ‘div’ the text will be horizontally centered, and in the ‘vertically’ it will magically be centered vertically. This is just one example to give you an idea of the possibilities, can you see more?