margin-trim

margin-trim プロパティは、包含ブロックがその子のマージンを包含ブロックの縁に隣接する部分で切り取るすることを可能にします。

構文

margin-trim: none;
margin-trim: in-flow;
margin-trim: all;

/* グローバル値 */
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: unset;

値

none

マージンは包含ブロックで切り取られません。

in-flow

このボックスに含まれるフロー内のボックスでは、ボックスの縁に隣接するブロック軸のマージンがゼロに切り捨てられます。

また、そのようなマージンで相殺されたマージンは切り捨てられます。

all

包含ブロックのコンテンツの縁とマージンが一致しているフロー内のボックスや浮動要素のマージンを切り取ります。

公式定義

初期値none
適用対象ブロックコンテナーと段組みコンテナー。 ::first-letterおよび::first-line にも適用されます。
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

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

例

基本的な使用

このプロパティへの対応が実装されたら、次のように動作するでしょう。

インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。

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;
}

ここでの問題は、行の右に 20px の間隔が空きすぎてしまうことで、それを修正するためにこのようにするのではないでしょうか。

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

これを実現するために別のルールを書かなければならないのは面倒ですし、柔軟性もありません。代わりに、 margin-trim で解決できます。

 article {
  margin-trim: in-flow;
  ...
}

仕様書

Specification
CSS Box Model Module Level 4
# margin-trim

ブラウザーの互換性

BCD tables only load in the browser

関連情報