📝 输入CSS代码
📊 属性映射表
| 物理属性 | 逻辑属性 | 说明 |
|---|
| margin-left | margin-inline-start | 行内起始外边距 |
| margin-right | margin-inline-end | 行内结束外边距 |
| margin-top | margin-block-start | 块级起始外边距 |
| margin-bottom | margin-block-end | 块级结束外边距 |
| padding-left | padding-inline-start | 行内起始内边距 |
| padding-right | padding-inline-end | 行内结束内边距 |
| padding-top | padding-block-start | 块级起始内边距 |
| padding-bottom | padding-block-end | 块级结束内边距 |
| border-left | border-inline-start | 行内起始边框 |
| border-right | border-inline-end | 行内结束边框 |
| border-top | border-block-start | 块级起始边框 |
| border-bottom | border-block-end | 块级结束边框 |
| left | inset-inline-start | 行内起始偏移 |
| right | inset-inline-end | 行内结束偏移 |
| top | inset-block-start | 块级起始偏移 |
| bottom | inset-block-end | 块级结束偏移 |
| width | inline-size | 行内尺寸 |
| height | block-size | 块级尺寸 |
| min-width | min-inline-size | 最小行内尺寸 |
| min-height | min-block-size | 最小块级尺寸 |
| max-width | max-inline-size | 最大行内尺寸 |
| max-height | max-block-size | 最大块级尺寸 |
| text-align: left | text-align: start | 文本起始对齐 |
| text-align: right | text-align: end | 文本结束对齐 |
| float: left | float: inline-start | 行内起始浮动 |
| float: right | float: inline-end | 行内结束浮动 |
💡 使用说明
- 逻辑属性：与书写方向无关的CSS属性，自动适应LTR/RTL布局
- RTL支持
- 国际化：使用逻辑属性是国际化Web应用的最佳实践
- 转换保留注释、格式和未匹配的属性
- 纯前端工具，代码不上传服务器