[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啟動會更好地做這項工作嗎？它的機會是。