CSS | margin-inline-end 属性

margin-inline-end 属性用于定义元素的内联方向(默认为左到右)上的边框外边距，即在外边距边界外侧创建一个空白间隙。它可以与 margin 属性结合使用，用于设置元素的外边距。

语法

/* 单独设置 margin-inline-end */
margin-inline-end: length | initial | inherit;

/* 结合 margin 属性设置外边距 */
margin: length | auto | initial | inherit;

取值

• length：可以是一个带单位的长度值（如 10px），表示在内联方向上设置的外边距大小。
• auto：自动计算外边距，根据上下文自动确定。
• initial：恢复默认值。
• inherit：从父元素继承。

示例

/* 为段落设置内联方向上的右外边距 */
p {
  margin-inline-end: 20px;
}

/* 结合 margin 属性设置外边距 */
.box {
  margin: 10px 20px 30px 40px;
  margin-inline-end: 50px;
}

兼容性

IE 浏览器不支持 margin-inline-end 属性，建议使用 margin-right 代替。

总结

margin-inline-end 属性可以方便地设置元素内联方向上的右外边距，使页面布局更加灵活和美观。同时也要注意浏览器兼容性问题。