margin-trim

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die Eigenschaft margin-trim ermöglicht es dem Container, die Ränder seiner Kinder zu kürzen, wenn sie an die Ränder des Containers angrenzen.

Syntax

css

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: Ränder, die den Blockkindern bereitgestellt werden, wenn sie an die Ränder des Containers angrenzen, werden auf null gekürzt, ohne die Ränder des Containers zu beeinflussen.
block-start: Der Rand des ersten Blockkindes mit dem Rand des Containers wird auf null gekürzt.
block-end: Der Rand des letzten Blockkindes mit dem Rand des Containers wird auf null gekürzt.
inline: Ränder, die den Inline-Kindern bereitgestellt werden, wenn sie an die Ränder des Containers angrenzen, werden auf null gekürzt, ohne den Abstand am Anfang und Ende der Zeile zu beeinflussen.
inline-start: Der Rand zwischen dem Rand des Containers und dem ersten Inline-Kind wird auf null gekürzt.
inline-end: Der Rand zwischen dem Rand des Containers und dem letzten Inline-Kind wird auf null gekürzt.

Formale Definition

Initialer Wert	`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 so funktionieren:

Wenn Sie einen Container mit einigen Inline-Kindern haben und einen Abstand zwischen jedem Kind einfügen möchten, ohne dass dies den Abstand am Ende der Zeile beeinträchtigt, könnten Sie Folgendes tun:

css

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 der Zeile 20px zu viel Abstand hätten, also könnten Sie dies tun, um es zu beheben:

css

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

Es ist mühsam, eine weitere Regel zu schreiben, um dies zu erreichen, und es ist auch nicht sehr flexibel. Stattdessen könnte margin-trim dies beheben:

css

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

Ähnlich, um den linken Rand mit dem Rand des Containers zu entfernen:

css

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

Spezifikationen

Specification
CSS Box Model Module Level 4 # margin-trim

Browser-Kompatibilität

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Siehe auch

margin