Shape-margin - Propriété CSS

shape-margin

Résumé des caractéristiques de la propriété `shape-margin`

Description rapide

Définit la marge pour l'habillage d'un élément flottant.

Statut

Standard

Utilisable sur

HTML

Pourcentages

Calculés par rapport à la largeur du bloc parent.

Valeur initiale

0

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété shape-margin passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Formes de base

Références (W3C)

CSS Shapes Module Level 1

Statut du document: CR (document candidat à la recommandation)

Description de la propriété `shape-margin`.

La propriété shape-margin s'applique aux objets flottants, lorsqu'une forme d'habillage a été définie ou lorsque l'habillage se fait suivant le canal alpha d'une image (la transparence). La forme d'habillage ou l'image à utiliser sont définies par la propriété shape-outside. shape-margin définit alors l'espace entre la forme d'habillage et le texte, ou l'espace entre les parties transparentes de l'image et le texte.

Premier cas de figure : l'élément flottant ne comporte pas de forme d'habillage. Le texte s'arrête contre la marge de l'élément flottant.


	float:left;
	margin:10px;

Habillage d'un élément flottant sans forme de découpe

Deuxième cas de figure : l'élément flottant comporte une forme d'habillage, ici il s'agit 'une ellipse. Dans ce cas, le texte s'arrête contre la forme d'habillage.


	float:left;
	margin:10px;
	shape-outside:ellipse(100px 50px);

Habillage d'un élément flottant avec une forme de découpe

Troisième cas de figure : l'élément flottant comporte une forme d'habillage et une marge définie par shape-margin. Le texte s'arrête contre la marge autour de la forme. On constate cependant que la marge de shape-margin ne peut repousser le texte au delà de ce qu'aurait fait la marge margin de l'élément.


	float:left;
	margin:10px;
	shape-outside:ellipse(100px 50px);
	shape-margin:15px;

Habillage d'un élément flottant avec une forme de découpe et marge

Reportez-vous à la propriété float pour plus de détails sur les éléments flottants, et à la propriété shape-outside pour savoir comment définir une forme d'habillage.

Valeurs pour `shape-margin`.

shape-margin: 10px;

Une valeur positive ou nulle, suivie d'une unité de dimension (voir les unités de dimension).

La valeur peut également être exprimée en pourcentages. Ceux-ci sont alors calculés par rapport à la largeur du bloc parent.

Valeurs communes à toutes les propriétés :


shape-margin: initial  (0)
shape-margin: inherit
shape-margin: revert
shape-margin: revertLayer
shape-margin: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété `shape-margin`.

Le simulateur applique la valeur saisie à la propriété shape-margin de l'élément bleu ci-dessous et de l'image qui représente un lapin. Ces deux éléments sont déclarés flottants à gauche (float:left).

Le carré bleu a une forme d'habillage définie par un polygone (une simple forme triangulaire). Pour le lapin, la forme d'habillage est déterminée par les parties transparentes de l'image. Observez comment la valeur pour shape-margin éloigne plus ou moins le texte de la forme d'habillage.

shape-margin :

Ce texte est un exemple de l'effet de la propriété shape-margin. Il n'est pas nécessaire d'en continuer la lecture jusqu'au bout surtout que, comme vous allez le voir, c'est la même phrase qui est copiée-collée plusieurs fois. Ce texte est un exemple de l'effet de la propriété shape-margin. Il n'est pas nécessaire d'en continuer la lecture jusqu'au bout surtout que, comme vous allez le voir, c'est la même phrase qui est copiée-collée plusieurs fois. Ce texte est un exemple de l'effet de la propriété shape-margin.

Ce texte n'est là que pour illustrer l'effet de la propriété shape-margin. Il n'est pas nécessaire d'en poursuivre la lecture jusqu'au bout. De toute façon, c'est la même phrase qui est copiée-collée plusieurs fois, comme vous allez le voir. Ce texte n'est là que pour illustrer l'effet de la propriété shape-margin. il n'est pas nécessaire d'en poursuivre la lecture jusqu'au bout. De toute façon, c'est la même phrase qui est copiée-collée plusieurs fois, comme vous allez le voir. Ce texte n'est là que pour illustrer l'effet de la propriété shape-margin.

Prise en charge par les navigateurs (compatibilité).

Propriété
shape-margin

Estimation de la prise en charge globale.

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `shape-margin`.

Module CSS - Formes de base - Niveau 1

Première présentation de la propriété shape-margin.

20 Juin 2013
Document de travail.
20 Mars 2014
Candidat à la recommandation.

Voir aussi.

Le tracé des formes en SVG ou HTML est décrit par le module CSS Shapes Module. On retrouve dans ce module la propriété shape-margin, ainsi que les descriptions suivantes :

Propriétés :

shape-image-threshold

Définit le seuil de transparence en vu de l'habillage d'une image.

shape-outside

Définit la forme du contournement du texte pour un élément flottant.

Fonctions :

circle()

Définit un cercle qui pourra étre utilisé pour découper un élément ou définir une marge de contournement.

ellipse()

Définit une ellipse.

inset()

Définit un rectangle, utilisable pour découper un élément.

path()

Définit un contour d'après la syntaxe SVG d'un chemin.

polygon()

Définit une forme.