CSSの論理プロパティにおける考え方CSSのボックスモデルについて説明する時、下記のような図がよく使用されている。

確かにこの図は当時の正しいもので、もちろん今でもそうだが、margin-left、padding-right、border-topのような物理プロパティは最後の日が来るかもしれない。
新しい論理プロパティを使い始めるには、left/rightやtop/bottomについて考えるのをやめて、それらをinline-start,inline-end, block-start、block-endに置き換える必要がある。

インライン軸

英語を例にする。読む方向は左から始まり、右側で終わる。これはプロパティのインライン要素。「display: inline;」で配置された要素を考えた時、想像するのはとても簡単。各アイテムは行に沿って表示される。

例：padding-inline-startだと、言語が始まる側のpaddingになる。

・英語の場合
padding-inline-startは、padding-leftと同じ
・アラビア語の場合
padding-inline-startは、padding-rightと同じ
・日本語の場合
padding-inline-startは、padding-topと同じ

ブロック軸

topとbottomのプロパティだと、topがwebサイトの始まり、bottomが終わり。覚えておくのは非常に簡単。「display: block;」の要素が複数上から順に積み重なっていると想像してみる。

新しいボックスモデルのプロパティ

インラインとブロック軸をある程度理解したところで、新しいボックスモデルのプロパティを確認しておく。

英語の場合、プロパティは下記のようになる。

margin
・margin-block-start = margin-top
・margin-block-end = margin-bottom
・margin-inline-start = margin-left
・margin-inline-end = margin-right
padding
・padding-block-start = padding-top
・padding-block-end = padding-bottom
・padding-inline-start = padding-left
・padding-inline-end = padding-right
border
・border-block-start = border-top
・border-block-end = border-bottom
・border-inline-start = border-left
・border-inline-end = border-right

論理ディメンション

widthとheightのプロパティもこの新しい方法に合わせて対応する必要がある。インラインとプロパティ軸を理解したら、ディメンションを理解するのも簡単。英語では、widthプロパティはinline-sizeに、heightプロパティはblock-sizeに置き換える。

日本語のように上から下の言語の場合、逆になる。
　・widthは、block-sizeに
　・heightは、inline-sizeに
min/maxは、プロパティの開始時にmin/maxを追加するだけ。
　・min-inline-size: 300px; max-block-size: 100px;

参考元：https://coliss.com/articles/build-websites/operation/css/new-css-logical-properties.html