Propriété shape-margin
La propriété shape-margin définit une marge autour d'une forme,
définie par la propriété shape-outside.
Cela permet d'augmenter la distance entre la forme et le texte qui l'entoure.
Syntaxe
sélecteur {
shape-margin: valeur;
}
Exemple
Un cercle avec une marge de 20px :
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
shape-margin: 10px;
clip-path: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
Exemple
Un triangle avec une marge de 1em :
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
shape-margin: 1em;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
background: #e74c3c;
}
p {
width: 500px;
text-align: justify;
}
:
Voir aussi
-
la propriété
shape-outside,
qui définit la forme pour le flot -
la propriété
clip-path,
qui crée la forme visible de l'élément -
la propriété
float,
nécessaire au fonctionnement de shape-margin
