Widely available YES。全主要ブラウザで対応済み。国際化を見据えた新規プロジェクトでは積極採用を推奨。

Logical properties

block-size は CSS のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは width または height プロパティに相当し、 writing-mode の値によって変わります。書字方向が垂直方向であった場合、 block-size の値は要素の幅に対応し、水平方向であった場合は要素の高さに対応します。関連プロパティの inline-size が要素のもう一方の寸法を定義します。

国際化レイアウト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
block-size
57
79
41
12.1
57
12.2
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
border-block

The border-block は CSS のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する一括指定プロパティです。
87
87
66
14.1
87
14.5
border-block-color

border-block-color は CSS のプロパティで、要素の論理的なブロックの両端の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは border-top-color および border-bottom-color、または border-right-color および border-left-color のどちらかに対応し、どちらに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
87
87
66
14.1
87
14.5
border-block-end

border-block-end は CSS のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。
69
79
41
12.1
69
12.2
border-block-end-color

border-block-end-color は CSS のプロパティで、要素の論理的なブロックの末尾側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは border-top-color, border-right-color, border-bottom-color, border-left-color の何れかに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-block-end-style

border-block-end-style は CSS のプロパティで、要素の論理的なブロックの終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは border-top-style, border-right-style, border-bottom-style, border-left-style のいずれかに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-block-end-width

border-block-end-width は CSS のプロパティで、要素の論理的なブロックの終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width, border-right-width, border-bottom-width, border-left-width のいずれかに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-block-start

border-block-start は CSS のプロパティで、個々の論理的なブロック方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。
69
79
41
12.1
69
12.2
border-block-start-color

border-block-start-color は CSS のプロパティで、要素の論理的なブロックの先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは border-top-color, border-right-color, border-bottom-color, border-left-color の何れかに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-block-start-style

border-block-start-style は CSS のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは border-top-style, border-right-style, border-bottom-style, border-left-style のいずれかに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-block-start-width

border-block-start-width は CSS のプロパティで、要素の論理的なブロックの先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width, border-right-width, border-bottom-width, border-left-width のいずれかに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-block-style

border-block-style は CSS のプロパティで、要素の論理的なブロック方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは border-top-style と border-bottom-style、または border-left-style と border-right-style のどちらかに対応し、どちらに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
87
87
66
14.1
87
14.5
border-block-width

border-block-width は CSS のプロパティで、要素の論理的なブロック方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width と border-bottom-width、または border-left-width と border-right-width の組み合わせのどちらかに対応し、どちらに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
87
87
66
14.1
87
14.5
border-end-end-radius

border-end-end-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の writing-mode, direction, text-orientation に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。
89
89
66
15
89
15
border-end-start-radius

border-end-start-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の writing-mode, direction, text-orientation に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。
89
89
66
15
89
15
border-inline

border-inline は CSS のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの一ヶ所で設定する一括指定プロパティです。
87
87
66
14.1
87
14.5
border-inline-color

border-inline-color は CSS のプロパティで、要素の論理的なインライン方向の両端の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは border-top-color と border-bottom-color、または border-right-color と border-left-color の組み合わせのどちらかに対応し、どちらに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
87
87
66
14.1
87
14.5
border-inline-end

border-inline-end は CSS のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。
69
79
41
12.1
69
12.2
border-inline-end-color

border-inline-end-color は CSS のプロパティで、要素の論理的なブロックの末尾側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは border-top-color、border-right-color、border-bottom-color、border-left-color の何れかに対応し、どれに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-inline-end-style

border-inline-end-style は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは border-top-style、border-right-style、border-bottom-style、border-left-style のいずれかに対応し、どれに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-inline-end-width

border-inline-end-width は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width、border-right-width、border-bottom-width、border-left-width のいずれかに対応し、どれに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-inline-start

border-inline-start は CSS のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。
69
79
41
12.1
69
12.2
border-inline-start-color

border-inline-start-color は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは border-top-color、border-right-color、border-bottom-color、border-left-color の何れかに対応し、どれに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-inline-start-style

border-inline-start-style は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは border-top-style、border-right-style、border-bottom-style、border-left-style のいずれかに対応し、どれに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-inline-start-width

border-inline-start-width は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width、border-right-width、border-bottom-width、border-left-width のいずれかに対応し、どれに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
border-inline-style

border-inline-style は CSS のプロパティで、要素の論理的なインライン方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは border-top-style と border-bottom-style、または border-left-style と border-right-style の組み合わせのどちらかに対応し、どちらに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
87
87
66
14.1
87
14.5
border-inline-width

border-inline-width は CSS のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width と border-bottom-width、または border-left-width と border-right-width の組み合わせのどちらかに対応し、どちらに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。
87
87
66
14.1
87
14.5
border-start-end-radius

border-start-end-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の writing-mode, direction, text-orientation に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。
89
89
66
15
89
15
border-start-start-radius

border-start-start-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の writing-mode, direction, text-orientation に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。
89
89
66
15
89
15
inline-end
118
118
55
15
118
15
inline-start
118
118
55
15
118
15
inline-end
118
118
55
15
118
15
inline-start
118
118
55
15
118
15
inline-size

inline-size は CSS のプロパティで、要素のブロックにおけるインライン軸方向の寸法を定義します。書字方向 (writing-mode) が横書きである場合、これは width に対応します。書字方向が縦書きである場合、 height プロパティに対応します。関連するプロパティは block-size であり、これは要素のもう一方の軸を定義します。
57
79
41
12.1
57
12.2
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
inset

inset は CSS のプロパティで、 top, right, bottom, left に対応する一括指定です。これは margin の一括指定における複数値の場合と同じ構文です。
87
87
66
14.1
87
14.5
inset-block

inset-block は CSS のプロパティで、要素における論理的なブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 top と bottom、または right と left のいずれかのプロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。
87
87
63
14.1
87
14.5
inset-block-end

inset-block-end は CSS のプロパティで、要素の論理的なブロック方向の末尾のオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 top, right, bottom, left のいずれかのプロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。
87
87
63
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
inset-block-start

inset-block-start は CSS のプロパティで、要素の論理的なブロック方向の先頭のオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 top, right, bottom, left のいずれかのプロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。
87
87
63
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
inset-inline

inset-inline は CSS のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 top と bottom、または right と left のいずれかのプロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。
87
87
63
14.1
87
14.5
inset-inline-end

inset-inline-end は CSS のプロパティで、要素における論理的なインライン方向の末尾からの内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 top, right, bottom, left のいずれかのプロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。
87
87
63
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
inset-inline-start

inset-inline-start は CSS のプロパティで、要素における論理的なインライン方向の先頭からの内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 top, right, bottom, left のいずれかのプロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。
87
87
63
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
auto
87
87
66
14.1
87
14.5
margin-block

margin-block は CSS の一括指定プロパティで、論理的なブロックの先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。
87
87
66
14.1
87
14.5
margin-block-end

margin-block-end は CSS のプロパティで、要素の論理的なブロック方向の末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。
69
79
41
12.1
69
12.2
margin-block-start

margin-block-start は CSS のプロパティで、要素の論理的なブロック方向の先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。
69
79
41
12.1
69
12.2
margin-inline

margin-inline は CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。
87
87
66
14.1
87
14.5
margin-inline-end

margin-inline-end は CSS のプロパティで、要素の論理的なインライン方向の末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。これは margin-top, margin-right, margin-bottom, margin-left のいずれかのプロパティに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
margin-inline-start

margin-inline-start は CSS のプロパティで、要素の論理的なインライン方向の先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。これは margin-top, margin-right, margin-bottom, margin-left のいずれかのプロパティに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
69
79
41
12.1
69
12.2
max-block-size

max-block-size は CSS のプロパティで、 writing-mode で指定された書字方向とは逆の向きの要素の最大寸法を指定します。すなわち、書字方向が水平 (横書き) であれば、 max-block-size は max-height と等価になります。書字方向が垂直 (縦書き) であれば、 max-block-size は max-width と同じになります。
57
79
41
12.1
57
12.2
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
max-inline-size

max-inline-size は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは max-width または max-height のどちらかのプロパティと、 writing-mode の値に応じて対応します。
57
79
41
12.1
57
12.2
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
min-block-size

min-block-size は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは min-width または min-height のどちらかのプロパティと、 writing-mode の値に応じて対応します。
57
79
41
12.1
57
12.2
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
min-inline-size

min-inline-size は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは min-width または min-height のどちらかのプロパティと、 writing-mode の値に応じて対応します。
57
79
41
12.1
57
12.2
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
overflow-block

overflow-block は CSS プロパティで、コンテンツがブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。
135
135
69
26
135
26
overlay
135
135
112
135
overflow-inline

overflow-inline は CSS のプロパティで、コンテンツがボックスのインライン方向の先頭および末尾方向の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。
135
135
69
26
135
26
overlay
135
135
112
135
padding-block

padding-block は CSS の一括指定プロパティで、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに対応づけられます。
87
87
66
14.1
87
14.5
padding-block-end

padding-block-end は CSS のプロパティで、要素のブロック方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。
69
79
41
12.1
69
12.2
padding-block-start

padding-block-start は CSS のプロパティで、要素のブロック方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。
69
79
41
12.1
69
12.2
padding-inline

padding-inline は CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに対応づけられます。
87
87
66
14.1
87
14.5
padding-inline-end

padding-inline-end は CSS のプロパティで、要素の論理的なインライン方向の末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。
69
79
41
12.1
69
12.2
padding-inline-start

padding-inline-start は CSS のプロパティで、要素のインライン方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。
69
79
41
12.1
69
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-height (8)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-height (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-height (5.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-height (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-height (5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-border-end-color (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-border-end-style (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-border-end-width (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-border-start-color (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-border-start-style (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-width (8)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-width (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-width (5.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-width (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-logical-width (5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (63)
対応条件
  • 以前は別名で対応していました: offset-block (41)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (63)
対応条件
  • 以前は別名で対応していました: offset-block-end (41)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (63)
対応条件
  • 以前は別名で対応していました: offset-block-start (41)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (63)
対応条件
  • 以前は別名で対応していました: offset-inline (41)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (63)
対応条件
  • 以前は別名で対応していました: offset-inline-end (41)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (63)
対応条件
  • 以前は別名で対応していました: offset-inline-start (41)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-after (8)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-after (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-after (5.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-after (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-after (5)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-before (8)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-before (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-before (5.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-before (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-before (5)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-end (2)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-end (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-margin-end (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-end (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-end (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-end (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-start (2)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-start (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-margin-start (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-start (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-start (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-margin-start (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (10.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (10.3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-end (2)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-end (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-padding-end (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-end (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-end (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-end (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-start (2)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-start (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: -moz-padding-start (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-start (3)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-start (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: -webkit-padding-start (3)

基本構文

CSS 
.card {
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: 1.5rem;
  border-inline-start: 4px solid blue;
}

/* Logical width and height */
.sidebar {
  inline-size: 300px;
  block-size: 100%;
}

ライブデモ

margin-inline / padding-block

Logical properties の margin-inline / padding-block パターンです。

プレビュー全画面表示

border-inline-start

Logical properties の border-inline-start パターンです。

プレビュー全画面表示

inline-size / block-size

Logical properties の inline-size / block-size パターンです。

プレビュー全画面表示

実務での使いどころ

  • 多言語サイトの RTL 対応

    margin-inline-start / end を使うことで、LTR と RTL のレイアウト切り替えが自動で行われ、個別のスタイル上書きが不要になる。

  • 縦書きレイアウト

    日本語の縦書き（writing-mode: vertical-rl）でも、論理プロパティが正しいブロック方向・インライン方向に適用される。

注意点

  • 既存コードベースの物理プロパティを一括置換すると、意図しないレイアウト変更が生じる可能性がある。段階的に移行するのが安全。
  • ショートハンド（margin-inline、padding-block）と個別指定（margin-inline-start）を混在させると優先順位の把握が難しくなる。

アクセシビリティ

  • RTL 言語の利用者にとって正しい方向のレイアウトが自動適用されるため、アクセシビリティ向上に直結する。

参考リンク