Logical properties follow the text, not the screen edges.

English runs left to right, but Arabic and Hebrew run right to left. A property like margin-left is tied to the screen, so it lands on the wrong side when the page flips. A logical property follows the text instead.

The inline axis is the way text runs along a line. The block axis is the way paragraphs stack. So padding-inline sets both ends of a line, margin-block sets above and below, and inline-size replaces width.

-start means where the text begins. In English that is the left, but in a box with dir="rtl" it becomes the right.

<blockquote class="quote">Hello</blockquote>
<blockquote class="quote" dir="rtl">مرحبا</blockquote>

.quote {
  margin-inline: 0;
  padding-inline-start: 16px;
  border-inline-start: 6px solid #0f766e;
}