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