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

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

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

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

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

同樣，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;

或者當(dāng)為多個方向定義填充時：

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

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

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

例如：

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

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