margin-trim CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die margin-trim-Eigenschaft ermöglicht es dem Container, die Ränder seiner Kinder zu kürzen, wo sie an die Kanten des Containers angrenzen.
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;
Werte
none-
Ränder werden vom Container nicht gekürzt.
block-
Die Ränder der Blockkinder, die an die Kanten des Containers angrenzen, werden auf null gekürzt, ohne die Ränder des Containers zu beeinflussen.
block-start-
Der Rand des ersten Blockkindes, das an die Kante des Containers angrenzt, wird auf null gekürzt.
block-end-
Der Rand des letzten Blockkindes, das an die Kante des Containers angrenzt, wird auf null gekürzt.
inline-
Die Ränder der Inline-Kinder, die an die Kanten des Containers angrenzen, werden auf null gekürzt, ohne den Abstand am Anfang und Ende der Zeile zu beeinflussen.
inline-start-
Der Rand zwischen der Kante des Containers und dem ersten Inline-Kind wird auf null gekürzt.
inline-end-
Der Rand zwischen der Kante des Containers und dem letzten Inline-Kind wird auf null gekürzt.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | Blockcontainer und mehrspaltige Container. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
margin-trim =
none |
[ block || inline ] |
[ block-start || inline-start || block-end || inline-end ]
Beispiele
Grundlegende Nutzung
Sobald die Unterstützung für diese Eigenschaft implementiert ist, wird sie wahrscheinlich folgendermaßen funktionieren:
Wenn Sie einen Container mit einigen Inline-Kindern haben und einen Rand zwischen jedem Kind einfügen möchten, der den Abstand am Ende der Zeile nicht beeinträchtigt, könnten Sie so vorgehen:
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;
}
Das Problem hier ist, dass Sie am Ende 20px zu viel Abstand rechts von der Zeile haben würden, daher könnten Sie dies tun, um es zu beheben:
span:last-child {
margin-right: 0;
margin-left: 0;
}
Es ist mühsam, eine zusätzliche Regel schreiben zu müssen, um dies zu erreichen, und es ist auch nicht sehr flexibel. Stattdessen könnte margin-trim dies beheben:
article {
margin-trim: inline-end;
/* … */
}
Ähnlich, um den linken Rand an der Kante des Containers zu entfernen:
article {
margin-trim: inline-start;
/* … */
}
Spezifikationen
| Spezifikation |
|---|
| CSS Box Model Module Level 4 # margin-trim |