shape-margin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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>
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </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.

css

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

Définition formelle

Valeur initiale	`0`
Applicabilité	flottants
Héritée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	comme spécifié, 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

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;
}

HTML

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

Specification
CSS Shapes Module Level 1 # shape-margin-property