隨著使用網絡的人比以往任何時候都多，確保網絡體驗對所有用戶都可訪問的需求變得更加迫切。這包括從從不同方向/角度（（從右到左，從上到下等）。

當添加傳統(tǒng)的 margin 和 padding 時，你明確地定義了來自各個方向（上、下、左和右）的邊距和填充。這可能會在你的區(qū)域設置中創(chuàng)建一個看起來不錯的布局，但當使用不同區(qū)域設置的用戶以與你設計的方式不同的 方向/角度 和查看內容時，可能會感到困惑。

每個現代開發(fā)者都應該使用margin-inline/margin-block和padding-inline/padding-block。

我們來分析這些CSS屬性是如何工作的，以及為什么我們要使用它們。

margin-inline和padding-inline控制左右 margin/padding。我們不是明確定義與這些特定方向對應的邊距，而是將它們定義為start和end邊距。雖然一個區(qū)域可能從左開始到右結束，但其他區(qū)域可能不是，所以以這種方式定義它們將確保無論區(qū)域設置如何，margin 和 padding 都會按預期顯示。

同樣，margin-block和padding-block控制上下 margin/padding，使用相同的start和end模式，而不是明確定義top和bottom。

要同時為多個方向定義 margin 或 padding，你可以使用：

• margin-inline: [start值] [end值]; 用于左右邊距
• margin-block: [start值] [end值]; 用于上下邊距
• padding-inline: [start值] [end值]; 用于左右填充
• padding-block: [start值] [end值]; 用于上下填充

要僅為一個方向定義邊距或填充，你可以使用：

• margin-inline-start（而不是margin-left）
• margin-inline-end（而不是margin-right）
• margin-block-start（而不是margin-top）
• margin-block-end（而不是margin-bottom）
• padding-inline-start（而不是padding-left）
• padding-inline-end（而不是padding-right）
• padding-block-start（而不是padding-top）
• padding-block-end（而不是padding-bottom）

我們看一些例子：

// 傳統(tǒng)
margin-left: 1.2em;

// 等效
margin-inline-start: 1.2em;

// 傳統(tǒng)
padding-top: 5px;

// 等效
padding-block-start: 5px;

或者當為多個方向定義填充時：

// 傳統(tǒng)
padding: 5px 10px 20px 15px;

// 等效
padding-block: 5px 20px;
padding-inline: 15px 10px;

當與使用flexbox進行內容對齊而不是float結合使用時，這些現代margin/padding模式更加強大。Flexbox是一個與方向無關的布局模型。它不是明確地將元素對齊到left、right、top或bottom，而是允許將內容對齊到其父元素的垂直和水平start和end。

例如：

// 在從左到右查看時將子元素對齊到右側，或在從右到左查看時對齊到左側。
parent-element {
   display: flex;
   align-items: flex-end;
}

即使您的應用程序或網站目前不支持根據地域以不同的方向/方位顯示文本/內容，開發(fā)人員最終也應通過采用上述模式，努力使所有用戶都能獲得無障礙的網絡體驗。這是一個很容易實現的過渡，每個開發(fā)人員都應采用，以實現未來的無障礙訪問。