在设计网站时，迎合从左到右 (ltr) 和从右到左 (rtl) 语言对于全球受众至关重要。虽然大多数开发人员熟悉使用 margin-left 和 margin-right 进行布局调整，但这些属性在文本方向发生变化的环境中存在不足。输入 margin-inline-start 及其逻辑对应项 - 现代 css 属性，使多语言和双向内容的设计变得更容易。
在本文中，我们将探讨从 margin-left/margin-right 切换到 margin-inline-start 和 margin-inline-end 如何提高灵活性并保持 ltr 和 rtl 语言的一致性。
理解 css 中的逻辑属性
传统的 css 属性（例如 margin-left 和 margin-right）是物理属性，这意味着它们的行为与屏幕的视觉左侧和右侧相关。这对于英语等 ltr 语言效果很好，但当页面方向切换到 rtl 时（例如阿拉伯语或希伯来语）会产生问题。
css3 中引入的逻辑属性与方向无关。它们根据文档或元素的书写模式进行调整。关键的逻辑边距属性包括：
• margin-inline-start：替换 ltr 的 margin-left 和 rtl 的 margin-right。
• margin-inline-end：替换 ltr 的 margin-right 和 rtl 的 margin-left。
这些属性更好地符合双向文本的自然流动，使其成为国际化网页设计不可或缺的一部分。
为什么使用 margin-inline-start？
1 - 无缝 rtl 支持
当您使用 margin-left 时，无论文本方向如何，它总是将边距应用于元素的左侧。即使页面切换到 rtl，此行为也不会改变，从而导致布局未对齐。相比之下，margin-inline-start 根据文本方向进行调整，将边距应用到适当的一侧：
/* logical property */
.element {
margin-inline-start: 20px;
}
/* equivalent to */
:root[dir="ltr"] .element {
margin-left: 20px;
}
:root[dir="rtl"] .element {
margin-right: 20px;
}
2 - 更简洁的代码
如果没有逻辑属性，支持 ltr 和 rtl 将需要特定于方向的样式，从而增加复杂性和潜在的错误。对比一下：
传统方法：
:root[dir="ltr"] .element {
margin-left: 20px;
}
:root[dir="rtl"] .element {
margin-right: 20px;
}
现代方法：
.element {
margin-inline-start: 20px;
}
3 - 面向未来且可扩展
逻辑属性是 css 向自适应和灵活布局不断发展的一部分。通过采用 margin-inline-start，您可以使您的设计与现代标准保持一致，使其更具可扩展性和可维护性。
现实世界示例
以下是如何重构典型的卡片布局以获得更好的 rtl 支持：
之前：使用 margin-left
.card {
margin-left: 1rem;
padding-left: 2rem;
}
在 rtl 中，布局会看起来不正常，因为左侧的间距保持固定。
之后：使用 margin-inline-start
.card {
margin-inline-start: 1rem;
padding-inline-start: 2rem;
}
现在，边距和内边距会在方向改变时自动调整，确保一致的用户体验。
浏览器支持
逻辑属性在现代浏览器中得到了很好的支持，包括 chrome、edge、firefox 和 safari。如果您需要支持旧版浏览器，请考虑使用后备：
.card {
margin-left: 1rem; /* Fallback */
margin-inline-start: 1rem;
}
最后的想法
切换到像 margin-inline-start 这样的逻辑属性是一个很小的改变，但会对可访问性、可维护性和国际化产生很大影响。随着网络变得越来越全球化，采用这些属性可确保您的设计具有包容性并适应全球用户。
因此，下次您使用 margin-left 时，请暂停并考虑：margin-inline-start 会做得更好吗？很有可能，它会的。
祝您编码愉快，愿您的设计在任何语言中都能完美流畅！
