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.

La propriété CSS shape-margin définit la marge autour d'une forme CSS créée avec shape-outside.

Exemple interactif

La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.

css
/* Valeur de longueur */
/* Type <length> */
shape-margin: 10px;
shape-margin: 20mm;

/* Valeur proportionnelle */
/* Type <percentage> */
shape-margin: 60%;

/* Valeurs globales */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;

Syntaxe

Valeurs

<length-percentage>

Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. <length>) ou à un pourcentage (<percentage>) proportionnel à la largeur du bloc englobant de l'élément.

Définition formelle

Valeur initiale0
Applicabilitéflottants
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationune longueur, pourcentage ou calc() ;

Syntaxe formelle

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

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

Exemples

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;
}

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 he exists, probably
  knows its truth as we know it.
</section>

Résultat

Spécifications

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

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shape-margin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi