Свойство CSS `margin-trim`

Свойство margin-trim позволяет контейнеру обрезать внешние отступы дочерних элементов в местах их соприкосновения с краями контейнера.

Синтаксис

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

Внешний отступ между краем контейнера и последним строчным дочерним элементом обрезается до нуля.

Формальное определение

Формальный синтаксис

margin-trim = 
  none |
  in-flow |
  all

Примеры

Основное использование

После того как для этого свойства будет реализана поддержка, оно, вероятно, будет работать так:

Если у вас есть контейнер с несколькими строчными дочерними элементами и вы хотите задать отступ между ними, но не хотите, чтобы он влиял на интервал в конце строки, можно сделать примерно так:

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