shape-margin
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété CSS shape-margin définit la marge autour d'une forme CSS créée avec shape-outside.
Exemple interactif
shape-margin: 0;
shape-margin: 20px;
shape-margin: 1em;
shape-margin: 5%;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element"></div>
Nous avions convenu, mon compagnon et moi, que je devrais passer le voir
chez lui, après le dîner, pas plus tard que onze heures. Ce jeune Français
athlétique appartient à un petit groupe de sportifs parisiens, qui se sont
adonnés au « ballon » comme passe-temps. Après avoir épuisé toutes
les sensations que l'on peut trouver dans les sports ordinaires, même celles
de « l'automobile » à toute vitesse, les membres de « l'Aéro
Club » recherchent maintenant dans les airs, où ils se livrent à toutes
sortes d'exploits audacieux, l'excitation nerveuse qu'ils ont cessé de
trouver sur terre.
</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%);
}
La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.
Syntaxe
css
/* Valeur de type <length> */
shape-margin: 10px;
shape-margin: 20mm;
/* Valeur de type <percentage> */
shape-margin: 60%;
/* Valeurs globales */
shape-margin: inherit;
shape-margin: initial;
shape-margin: revert;
shape-margin: revert-layer;
shape-margin: unset;
Valeurs
<length-percentage>-
Définit la marge de la forme à une valeur de type
<length>ou à un pourcentage (<percentage>) de la largeur du bloc englobant de l'élément.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | flottants |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | comme défini, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
shape-margin =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
>Ajouter une marge à un polygone
HTML
html
<section>
<div class="shape"></div>
Nous ne sommes pas tout à fait sûrs de quoi que ce soit en biologie ; nos
connaissances en géologie sont relativement très limitées, et les lois
économiques de la société sont incertaines pour tout le monde, sauf pour
certains individus qui tentent de les exposer ; mais avant que le monde
ne soit façonné, le carré sur l'hypoténuse était égal à la somme des carrés
sur les deux autres côtés d'un triangle rectangle, et il en sera de même après
la mort de ce monde ; et l'habitant de Mars, s'il en existe un, connaît
probablement sa vérité comme nous la connaissons.
</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;
}
Result
Spécifications
| Spécification |
|---|
| CSS Shapes Module Level 1> # shape-margin-property> |
Compatibilité des navigateurs
Voir aussi
- Les formes CSS
- Un aperçu des formes CSS
- Le type de donnée
<basic-shape> - La propriété
shape-outside - La propriété
shape-image-threshold