Remove margins from children that touch parent sides. no longer selected :last-child

Exciting news for CSS enthusiasts! The margin-trim property is here to revolutionize our layout design! ???? Say goodbye to unwanted margins and hello to cleaner, more precise spacing. With margin-trim, we can trim away excessive margins, resulting in sleeker and more efficient designs. Check out this example:

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

The problem here is that you'd end up with 20px too much 
spacing at the right of the row, so you'd maybe do this to fix it:

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

It is a pain having to write another rule to achieve this, 
and it is also not very flexible. Instead,?margin-trim?could fix it:

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

Syntax:

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;        

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim