使用 margin-inline 替代传统水平外边距，只需将 margin-left 和 margin-right 合并为一个属性。该属性接受一个或两个值，分别对应起始边（start）和结束边（end）的外边距，浏览器会根据文档的书写模式（如从左到右或从右到左）自动映射为具体的左右间距。
如何设置对称的水平外边距？
当左右外边距数值相同时，直接传入单个数字即可。例如 margin-inline: 16px; 会在起始边和结束边都应用 16px 的间距，这等同于 margin-left: 16px; margin-right: 16px;。
div {
width: 200px;
background-color: lightblue;
/* 左右各 16px */
margin-inline: 16px;
}如何设置非对称的水平外边距？
当左右外边距数值不同时，传入两个值。第一个值对应起始边（LTR 模式下为左，RTL 模式下为右），第二个值对应结束边（LTR 模式下为右，RTL 模式下为左）。例如 margin-inline: 10px 20px; 在 LTR 布局中相当于 margin-left: 10px; margin-right: 20px;。
立即学习“前端免费学习笔记（深入）”；
div {
width: 200px;
background-color: lightgreen;
/* 起始边 10px, 结束边 20px */
margin-inline: 10px 20px;
}在 RTL 布局下 margin-inline 的行为是什么？
在从右到左（RTL）的书写模式下，margin-inline 会自动翻转映射关系。传入 margin-inline: 10px 20px; 时，浏览器会将 10px 应用于右侧（起始边），将 20px 应用于左侧（结束边），从而保持视觉上的相对位置不变。
