JavaScript中getComputedStyle获取marginBlock与marginInline的返回值规则

核心结论 #

window.getComputedStyle返回的marginBlock、marginInline 并不始终对应margin-top/margin-bottom、margin-left/margin-right。二者属于CSS逻辑属性，实际映射的物理边距由元素的writing-mode（书写模式）、direction（文本方向）共同决定。

默认排版场景的映射规则 #

你给出的参考值对应绝大多数页面的默认排版配置：writing-mode: horizontal-tb（水平内容从上到下排布）+ direction: ltr（文本从左到右书写），该场景下映射关系和你观测到的一致：

• 块轴（block axis）为垂直方向，因此marginBlock代表上下边距：
  • marginBlockStart = marginTop
  • marginBlockEnd = marginBottom
• 行轴（inline axis）为水平方向，因此marginInline代表左右边距：
  • marginInlineStart = marginLeft
  • marginInlineEnd = marginRight

对应你提供的参考值验证如下：

margin: "10px 20px 30px 40px"（物理边距顺序为上、右、下、左）
marginBlock: "10px 30px"
marginBlockStart: "10px"
marginBlockEnd: "30px"
marginBottom: "30px"
marginInline: "40px 20px"
marginInlineEnd: "20px"
marginInlineStart: "40px"
marginLeft: "40px"
marginRight: "20px"
marginTop: "10px"

非默认场景的映射变化 #

当页面/元素配置了非默认的排版规则时，二者映射关系会发生变化，举两个常见场景：

1. 竖排文本场景（如古籍、东亚文字竖排），配置writing-mode: vertical-rl（垂直内容从右到左排布）：
   • 块轴变为水平方向，marginBlock对应左右边距，marginBlockStart = marginRight、marginBlockEnd = marginLeft
   • 行轴变为垂直方向，marginInline对应上下边距，marginInlineStart = marginTop、marginInlineEnd = marginBottom
2. 从右到左书写的语言场景（如阿拉伯语、希伯来语页面），配置direction: rtl：
   • 水平排版下，marginInlineStart = marginRight、marginInlineEnd = marginLeft，marginInline的两个值顺序和左右边距正好相反。

内容的提问来源于stack exchange，提问作者CES