Logical properties

Logical properties describe layout according to the writing direction rather than left or right. Your design adapts on its own to languages such as Arabic or Japanese.

inline: the axis text flows along. In English it is horizontal.
block: the axis blocks stack along. In English it is vertical.
margin-inline, padding-block: replace the physical margins and paddings of each axis.
inline-size, block-size: equivalent to width and height in horizontal writing.
inset-inline-start: the logical equivalent of left in left-to-right languages.

Example

Change direction and writing-mode. Because the item class uses logical properties, its spacing follows the writing direction in every case.

Select direction:

ltrrtl

Select writing-mode:

horizontal-tbvertical-rlvertical-lr

ResultLiveContainer width100%

html

<div class="container">
  <div class="child item">1</div>
  <div class="child item">2</div>
</div>

<div class="container">
  <div class="child item">1</div>
  <div class="child item">2</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  block-size: 13rem;
  direction: ltr;
  padding: 0.5rem;
  writing-mode: horizontal-tb;
}

.item {
  inline-size: fit-content;
  margin-block-end: 0.5rem;
  margin-inline-start: 4rem;
  padding-block: 1rem;
  padding-inline: 2rem;
}

.container {
  border: 1px solid #2b7de0;
  block-size: 13rem;
  direction: ltr;
  padding: 0.5rem;
  writing-mode: horizontal-tb;
}

.item {
  inline-size: fit-content;
  margin-block-end: 0.5rem;
  margin-inline-start: 4rem;
  padding-block: 1rem;
  padding-inline: 2rem;
}

Edit the code or use the selectors: the result updates instantly.