diff options
Diffstat (limited to 'files/fr/web/css/shape-margin/index.md')
| -rw-r--r-- | files/fr/web/css/shape-margin/index.md | 112 |
1 files changed, 50 insertions, 62 deletions
diff --git a/files/fr/web/css/shape-margin/index.md b/files/fr/web/css/shape-margin/index.md index 7c382292a1..0da11ef82a 100644 --- a/files/fr/web/css/shape-margin/index.md +++ b/files/fr/web/css/shape-margin/index.md @@ -7,47 +7,47 @@ tags: - Reference translation_of: Web/CSS/shape-margin --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété CSS <strong><code>shape-margin</code></strong> définit la marge autour d'une forme CSS créée avec {{cssxref("shape-outside")}}.</p> +La propriété CSS **`shape-margin`** définit la marge autour d'une forme CSS créée avec {{cssxref("shape-outside")}}. -<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div> +{{EmbedInteractiveExample("pages/css/shape-margin.html")}} -<p>La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.</p> +La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour. -<pre class="brush:css no-line-numbers">/* Valeur de longueur */ -/* Type <length> */ +```css +/* Valeur de longueur */ +/* Type <length> */ shape-margin: 10px; shape-margin: 20mm; /* Valeur proportionnelle */ -/* Type <percentage> */ +/* Type <percentage> */ shape-margin: 60%; /* Valeurs globales */ shape-margin: inherit; shape-margin: initial; shape-margin: unset; -</pre> +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code><length-percentage></code></dt> - <dd>Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. {{cssxref("<length>")}}) ou à un pourcentage ({{cssxref("<percentage>")}}) proportionnel à la largeur du bloc englobant de l'élément.</dd> -</dl> +- `<length-percentage>` + - : Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. {{cssxref("<length>")}}) ou à un pourcentage ({{cssxref("<percentage>")}}) proportionnel à la largeur du bloc englobant de l'élément. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">section { +```css +section { max-width: 400px; } @@ -59,12 +59,14 @@ shape-margin: unset; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><section> - <div class="shape"></div> +```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 @@ -72,43 +74,29 @@ shape-margin: unset; 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></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", 500, 250)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.properties.shape-margin")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li> - <li>{{cssxref("shape-outside")}}</li> - <li>{{cssxref("shape-image-threshold")}}</li> - <li>{{cssxref("<basic-shape>")}}</li> -</ul> +</section> +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 500, 250)}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}} | {{Spec2('CSS Shapes')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.shape-margin")}} + +## Voir aussi + +- [Les formes CSS](/fr/docs/Web/CSS/CSS_Shapes) +- [Un aperçu des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS) +- {{cssxref("shape-outside")}} +- {{cssxref("shape-image-threshold")}} +- {{cssxref("<basic-shape>")}} |