[2 在设计网站时，迎合从左到右（LTR）和左右（RTL）语言对全球受众至关重要。尽管大多数开发人员都熟悉使用边缘左和边缘权利进行布局调整，但这些属性在文本方向变化的环境中却缺乏。输入Margin-Inline start及其逻辑对应物 - 现代CSS属性，使得为多语言和双向内容设计设计。

在本文中，我们将探讨如何从保证金/边距/边距 - 右翼转换到边距inline-start start and Margin-Inline-end改善灵活性并保持LTR和RTL语言之间的一致性。 [2
•保证金 - 内线启动：替换LTR的边距 - 左左右，RTL的边缘右翼。

•保证金 - 内线 - 端：替换RTL的LTR和边距左侧的边距。

这些属性与双向文本的自然流程更好地保持一致，这使得它们对于国际网络设计必不可少。

为什么要使用Margin-Inline-start？

1-无缝rtl支持 当您使用边距左侧时，无论文本方向如何，它总是将边距应用于元素的左侧。即使页面切换到RTL，此行为也不会改变，从而导致布局未对准。相比之下，保证金 - 内线启动基于文本方向，将保证金应用于适当的侧：

/ *逻辑属性 */ 。元素 { 利润 - 内线启动：20px; } / *等效 */ ：root [dir =“ ltr”]。元素{ 左键：20px; } ：root [dir =“ rtl”]。element { 边缘右：20px; }

2-清洁器代码

如果没有逻辑属性，支持LTR和RTL都需要方向特定的样式，从而增加了复杂性和错误的可能性。这是一个比较：

传统方法：

：root [dir =“ ltr”]。element { 左键：20px; } ：root [dir =“ rtl”]。element { 边缘右：20px; }

现代方法：

。元素 { 利润 - 内线启动：20px; }

逻辑属性是CSS持续发展自适应和灵活布局的一部分。通过采用保证金 - 内线启动，您可以将设计与现代标准保持一致，从而使它们更可扩展和可维护。 [2

这是您可以重构典型的卡片布局以获得更好的RTL支持：

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

。卡片 { 边缘左：1REM； 左填充：2REM； }

在RTL中，布局将抬头，因为间距保持固定在左侧。 之后：使用Margin-Inline-start

:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

现在，当方向变化时，边距和桨板自动调整，确保了一致的用户体验。 [2
逻辑属性在现代浏览器中得到了很好的支持，包括Chrome，Edge，Firefox和Safari。如果您需要支持较旧的浏览器，请考虑使用后备：

.element {
 margin-inline-start: 20px;
}

。卡片 { 边缘左：1REM； /* 倒退 */ 利润 - 内线启动：1REM; }

[2
切换到Margin-Inline-Start之类的逻辑属性是一个很小的变化，对可访问性，可维护性和国际化的影响很大。随着网络变得越来越全球，采用这些属性可确保您的设计包容性并且适用于全球用户。

下次您伸手去拿左侧时，请暂停并考虑：Margin-Inline启动会更好地做这项工作吗？它的机会是。