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

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

/* 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.

Syntaxe formelle

<length-percentage>


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

Exemples

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

<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

Spécification État Commentaires
CSS Shapes Module Level 1
La définition de 'shape-margin' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initiale0
Applicabilitéflottants
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 37Edge ? Firefox Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Support complet 10.1
Préfixée
Support complet 10.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 37Chrome Android Support complet 37Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 61 — 62
Désactivée
Désactivée From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24Safari iOS Support complet 10.3Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,