margin-trim
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 value | none |
---|---|
Applies to | Block containers and multi-column containers. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Computed value | com s'especifica |
Animation type | discrete |
Sintaxi formal
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
BCD tables only load in the browser