为什么你应该停止使用传统的 Margin 和 Padding

随着网络用户数量的不断增加，确保网络体验对所有用户都具有可访问性变得更加重要。这不仅包括视觉上的无障碍，还涉及从不同方向或角度（如从右到左、从上到下）访问内容的用户。

当你使用传统的 margin 和 padding 时，你明确地定义了来自各个方向（上、下、左和右）的边距和填充。这种方式可能会在你自己的区域设置中创建一个看似不错的布局，但对于使用不同区域设置的用户来说，可能会因为布局的方向和角度不同而感到困惑。

现代开发者应该使用 margin-inline / margin-block 和 padding-inline / padding-block

这些新的 CSS 属性可以更好地适应不同方向的布局需求。让我们来看看这些属性是如何工作的，以及为什么我们要使用它们。

margin-inline 和 padding-inline

margin-inline 和 padding-inline 控制左右 margin / padding，但它们不是明确地定义左边距或右边距，而是定义起始边距（start）和结束边距（end）。虽然某个区域可能从左到右排列，但其他区域可能相反，因此，以这种方式定义可以确保无论区域设置如何，margin 和 padding 都会按预期显示。

margin-block 和 padding-block

margin-block 和 padding-block 控制上下 margin / padding，也遵循相同的 start 和 end 模式，而不是明确地定义顶部或底部。

具体用法

• 同时为多个方向定义 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）

示例代码

传统写法：

/* 传统 */
margin-left: 1.2em;

等效的现代写法：

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

传统写法：

/* 传统 */
padding-top: 5px;

等效的现代写法：

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

当为多个方向定义填充时：

/* 传统 */
padding: 5px 10px 20px 15px;

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

与 Flexbox 结合使用

当与 flexbox 进行内容对齐而不是 float 结合使用时，这些现代的 margin / padding 模式更加强大。Flexbox 是一个与方向无关的布局模型，它允许将内容对齐到其父元素的垂直和水平 start 和 end，而不是明确地将元素对齐到 left、right、top 或 bottom。

例如：

/* 在从左到右查看时将子元素对齐到右侧，或在从右到左查看时对齐到左侧。 */
parent-element {
   display: flex;
   align-items: flex-end;
}

结论

即使您的应用或网站目前不支持根据地域以不同的方向或方位显示文本或内容，开发人员也应通过采用这些现代模式，使所有用户都能获得无障碍的网络体验。这是一个容易实现的过渡，每个开发人员都应该采用，以实现未来的无障碍访问。