shape-margin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die shape-margin CSS Eigenschaft legt einen Abstand für eine CSS-Form fest, die mit shape-outside erstellt wurde.

Probieren Sie es aus

Der Abstand ermöglicht es Ihnen, den Abstand zwischen den Rändern der Form (dem float-Element) und dem umgebenden Inhalt anzupassen.

Syntax

css
/* <length> values */
shape-margin: 10px;
shape-margin: 20mm;

/* <percentage> value */
shape-margin: 60%;

/* Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: revert;
shape-margin: revert-layer;
shape-margin: unset;

Werte

<length-percentage>

Legt den Abstand der Form auf einen <length>-Wert oder auf einen <percentage> der Breite des enthaltenen Blocks des Elements fest.

Formale Definition

Initialer Wert0
Anwendbar aufFlusselemente
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
AnimationstypLängenangabe, Prozentsatz oder calc();

Formale Syntax

shape-margin = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Hinzufügen eines Abstands zu einem Polygon

HTML

html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>

CSS

css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}

Ergebnis

Spezifikationen

Specification
CSS Shapes Module Level 1
# shape-margin-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch