CSS 逻辑属性转换器
物理属性(margin-left)与逻辑属性(margin-inline-start)互转,支持RTL布局适配
输入 CSS 属性
映射参考表:
| 物理属性 | → 逻辑属性 | 说明 |
|---|---|---|
margin-left | margin-inline-start | 行内起始边距 |
margin-right | margin-inline-end | 行内结束边距 |
margin-top | margin-block-start | 块级起始边距 |
margin-bottom | margin-block-end | 块级结束边距 |
padding-left/right/top/bottom | padding-inline/block-start/end | 内边距 |
border-left/right/top/bottom | border-inline/block-start/end | 边框 |
left / right | inset-inline-start/end | 定位偏移 |
top / bottom | inset-block-start/end | 定位偏移 |
clear: left/right | clear: inline-start/end | 清除浮动 |
float: left/right | float: inline-start/end | 浮动方向 |
text-align: left/right | text-align: start/end | 文本对齐 |
width | inline-size | 行内尺寸 |
height | block-size | 块级尺寸 |
min/max-width | min/max-inline-size | 行内极值 |
min/max-height | min/max-block-size | 块级极值 |
转换结果
方向预览:
margin-inline-start: 30px
margin-inline-start: 30px (RTL)