box · 盒模型

盒模型：margin / padding / border 的 block 与 inline

margin、padding、border 的每一条物理边都有逻辑对应，在 horizontal-tb 与 ltr 下为 margin-top → margin-block-start、border-left-width → border-inline-start-width……再加上把一条轴两端打包的简写 margin-block / padding-inline / border-block——其中 margin 与 padding 的这组接受 start、end 两个值，border 的不接受，见下。选属性、拖四条逻辑边、切书写方向，面板用 getComputedStyle 读回它们各自落到的物理属性。

1 · 设逻辑边，读物理属性

两个简写的展开维度不同。

margin-inline: <'margin-inline-start'> <'margin-inline-end'>?——值沿轴的两端排列，省略第二个值时两端相同。 margin-inline: 10px 24px → margin-inline-start: 10px、margin-inline-end: 24px
border-inline: <'border-inline-width'> || <'border-inline-style'> || <'border-inline-color'>——值沿边框的分项排列，两端共用，省略的分项取初始值。 border-inline: 2px solid → border-inline-width: 2px、border-inline-style: solid、border-inline-color: currentcolor

因此 border-inline 写不出两端不同的边框；要两端不同，须下沉到分项简写，它们的取值才沿两端排列——border-inline-width: <'border-inline-start-width'> <'border-inline-end-width'>?：

border-inline-width: 2px 6px → border-inline-start-width: 2px、border-inline-end-width: 6px

上方代码区会按当前取值，只在合法时给出简写形式。

改用逻辑属性的收益。 同一个组件在阿拉伯语界面（rtl）中，正文起始侧的留白应当自动翻到右侧：写 padding-inline-start 即可，写 padding-left 则需额外用 [dir=rtl] 覆盖。凡是与文字起始侧 / 结束侧绑定的间距与边框，换成 inline 逻辑属性后，RTL 适配不再需要成对维护覆盖规则。