margin-trim

可用性有限

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

实验性功能： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

margin-trim 属性允许容器修剪其子元素在与容器边缘相邻处的边距。

语法

css

margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;

/* Global values */
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: revert-layer;
margin-trim: unset;

值

none: 容器不会修剪边距。
block: 提供给块级子元素在与容器边缘相邻处的边距将被修剪为零，而不影响提供给容器的边距。
block-start: 第一个块级子元素与容器边缘之间的边距被修剪为零。
block-end: 最后一个块级子元素与容器边缘之间的边距被修剪为零。
inline: 提供给内联子元素在与容器边缘相邻处的边距将被修剪为零，而不影响行开头和结尾处的间距。
inline-start: 容器边缘和第一个内联子元素之间的边距被修剪为零。
inline-end: 容器边缘和最后一个内联子元素之间的边距被修剪为零。

正式定义

初始值	`none`
应用于	块级容器和多列容器。它也适用于 `::first-letter`。
继承	否
计算值	按指定
动画类型	离散

正式语法

margin-trim = 
  none                                                |
  [ block || inline ]                                 |
  [ block-start || inline-start || block-end || inline-end ]

示例

基本用法

一旦此属性的支持得以实现，它可能会像这样工作

当您有一个包含一些内联子元素的容器，并且您希望在每个子元素之间放置一个边距，但又不想让它干扰行末的间距时，您可能会执行以下操作

css

article {
  background-color: red;
  margin: 20px;
  padding: 20px;
  display: inline-block;
}

article > span {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
  margin-left: 30px;
}

这里的问题是您最终会在行的右侧获得 20px 的额外间距，因此您可能会执行以下操作来修复它

css

span:last-child {
  margin-right: 0;
  margin-left: 0;
}

为了实现这一点而不得不编写另一个规则是一件很麻烦的事情，而且它也不太灵活。相反，margin-trim 可以解决这个问题

css

article {
  margin-trim: inline-end;
  /* … */
}

类似地，要删除与容器边缘左侧的边距

css

article {
  margin-trim: inline-start;
  /* … */
}

规范

规范
CSS 盒模型模块级别 4 # margin-trim

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

margin