論理プロパティとは使用する言語の種類（英語・アラビア語・日本語など）に関係なく、最小限のスタイルの変更で、Webサイトを制御できる。
理論プロパティでmarginやpaddingを設定すると、要素の書字方向やテキストの向きに応じて物理的な余白に変換される。
CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど
...
coliss.com
inlineとblock
inlineは水平方向、blockは垂直方向に作用するプロパティである。
.header {
// 物理プロパティ 左右
margin-left: auto;
margin-right: auto;
// 物理プロパティ 上下
margin-top: auto;
margin-bottom: auto;
// 論理プロパティ 左右
margin-inline: auto;
// 論理プロパティ 上下
margin-block: auto;
}なお、left、right、top、bottomで指定されるプロパティは物理プロパティという。
startとend
論理プロパティはstartとendがある。書き方は下記の通り。
.header {
// 論理プロパティ 左右
margin-inline-start: auto;
margin-inline-end: auto;
// 論理プロパティ 上下
margin-block-start: auto;
margin-block-end: auto;
}startというのは要素の始まり、endは要素の終わりである。
左から読む言語であればmargin-inline-startは要素左側のmargin-left、margin-inline-endは要素右側のmargin-rightを指す。
margin-blockも同じ考え方である。
なお、要素が縦書きでコーディングされている場合は、inlineとblockが逆転してblockが水平方向（左右）、inlineが垂直方向（上下）に作用するプロパティとなる。
