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 |
瀏覽器相容性
載入中…