box · 盒模型

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

margin、padding、border 的每一条物理边都有逻辑对应：margin-top → margin-block-start、border-left-width → border-inline-start-width……再加上把一条轴两端打包的二值简写 margin-block / padding-inline / border-block。选属性、拖四条逻辑边、切书写方向，右侧用 getComputedStyle 读回它们各自落到的物理 longhand。

1 · 设逻辑边，读物理 longhand

二值简写在 border 与 margin/padding 上不一样。 margin-inline: 10px 24px 接受两个值（start 与 end 可不同）。但 border-inline: 2px solid 不接受 start/end 两个不同值——它只是把同一条边框同时设给 inline 的两端。要让 inline 两端边框不同宽，只能写 border-inline-start-width / border-inline-end-width 两条 longhand。上面的代码区会按当前取值，只在合法时给出简写形式。

为什么值得换。 同一个组件在阿拉伯语界面(rtl)里，「正文左侧的留白」应当自动翻到右侧。写 padding-inline-start 就一次到位；写 padding-left 则要额外加 [dir=rtl] 覆盖。把所有「贴着文字起始侧 / 结束侧」的间距与边框换成 inline 逻辑属性，RTL 适配基本免费。