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 |
浏览器兼容性
加载中…