如何在CSS中不使用left/right实现LTR/RTL自适应边距？

完全可以不用JavaScript或框架辅助类，直接借助CSS的逻辑属性就能实现需求——这类属性专门为适配LTR/RTL等不同书写方向设计，和text-align: start、justify-content: start属于同一套自适应体系。

实现代码 #

HTML

<button class="save">Save</button>
<button class="cancel">Cancel</button>

CSS

.cancel {
  /* 自动适配布局方向的起始边距 */
  margin-inline-start: 10px;
}

原理说明 #

• margin-inline-start是CSS逻辑属性，会根据页面的书写方向自动映射到物理边距：
  • 页面为LTR（从左到右）布局时，等价于margin-left: 10px；
  • 页面切换为RTL（从右到左）布局时，自动切换为margin-right: 10px。

如果需要设置结束方向的自适应边距（比如LTR时右外边距、RTL时左外边距），可以用margin-inline-end；内边距的自适应同理，对应padding-inline-start和padding-inline-end。

只要通过根元素的dir属性（如<html dir="rtl">）切换布局方向，这些逻辑属性就会自动调整，完全无需额外脚本。

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