Forgetting Left and Right

In a world where sites are translated to Arabic (written right to left), classic margin-left and margin-right create problems.

Logical Properties

Instead of physical sides, we use logical:

• inline: line direction (horizontal).
• block: paragraph direction (vertical).

| Physical Property | Logical Property | | :--- | :--- | | margin-left / right | margin-inline | | padding-top / bottom | padding-block | | width | inline-size | | height | block-size |

.button {
  padding-inline: 20px; /* Left and right at once! */
  margin-block-start: 10px; /* Margin from top (block start) */
}