margin-trim

none

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

block

コンテナーの辺に隣接するブロックの子に指定されたマージンは、コンテナーに指定されたマージンに影響を与えることなく、ゼロに切り詰められます。

block-start

コンテナーの端にある最初の子ブロックのマージンはゼロに切り詰められます。

block-end

コンテナーの端にある最後の子ブロックのマージンはゼロに切り詰められます。

inline

コンテナーの辺に隣接するインラインの子に指定されたマージンは、行の始まりと終わりの空間に影響を与えることなく、ゼロに切り詰められます。

inline-start

コンテナーの辺と最初のインラインの子との間のマージンはゼロに切り詰められます。

inline-end

コンテナーの辺と最後のインラインの子との間のマージンはゼロに切り詰められます。

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;
  margin-left: 30px;
}

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

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

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

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

同様に、コンテナーのエッジで左マージンを除去する場合は次のようにします。

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

• margin