margin-trim

This translation is incomplete. Please help translate this article from English

La propietat margin-trim permet al contenidor retallar els marges dels seus fills on s'adhereixen a les vores del contenidor.

Sintaxi

none
Els marges no són retallats pel contenidor.
in-flow

Per a les caixes in-flow contingudes per aquesta caixa, els marges block-axis adjacents a les vores de la caixa estan truncats a zero.

També trunca qualsevol marge col·lapsat amb aquest marge.

all
Retalla els marges de les caixes in-flow i floats, els marges dels quals coincideixen amb la vora del contingut del contenidor.

Definició formal

Initial valuenone
Applies toBlock containers and multi-column containers. It also applies to ::first-letter and ::first-line.
Inheritedno
Computed valuecom s'especifica
Animation typediscrete

Sintaxi formal

none | in-flow | all

Exemples

Ús bàsic

Una vegada que es doni suport a aquesta propietat, probablement funcionarà així::

Quan tinguem un contenidor amb alguns fills en línia i vulguem posar un marge entre cada fill, però no interferir amb l'espaiat al final de la fila, podem fer una cosa així:

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

El problema aquí és que acabaríem amb 20px massa espaiat a la dreta de la fila, així que tal vegada fariem això per a arreglar-ho:

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

√Čs un dolor haver d'escriure una altra norma per a aconseguir-lo, i tampoc √©s molt flexible. En lloc d'aix√≤, margin-trim podria arreglar-ho:

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

Especificacions

Especificacions Estat
CSS Box Model Module Level 4
The definition of 'margin-trim' in that specification.
Editor's Draft

Compatibilitat amb el navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
margin-trim
Experimental
Chrome No support NoEdge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1506241.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 1506241.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

Veure també