Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Januar 2020.
Dieshape-marginCSS Eigenschaft legt einen Abstand für eine CSS-Form fest, die mitshape-outside erstellt wurde.
Probieren Sie es aus
shape-margin: 0;shape-margin: 20px;shape-margin: 1em;shape-margin: 5%;<section> <div> <div></div> We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o'clock. This athletic young Frenchman belongs to a small set of Parisian sportsmen, who have taken up "ballooning" as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of "automobiling" at a breakneck speed, the members of the "Aéro Club" now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth. </div></section>.example-container { text-align: left; padding: 20px;}#example-element { float: left; margin: 20px; width: 180px; height: 180px; border-radius: 50%; background-color: rebeccapurple; shape-outside: circle(50%);}Der Abstand ermöglicht es Ihnen, den Abstand zwischen den Kanten der Form (demFloat-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 umschließenden Blocks des Elements fest.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | Flusselemente |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Berechneter Wert | relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers |
| Animationstyp | Längenangabe,Prozentsatz odercalc(); |
Formale Syntax
shape-margin =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Beispiele
Hinzufügen eines Abstands zu einem Polygon
HTML
html
<section> <div></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 |