Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété shape-outside

Description de la propriété shape-outside.

Définit la forme d'un élément, celle qui sera contournée par le texte si l'élément est flottant.

Valeurs pour shape-outside.

  • shape-outside: none;

    L'élément garde sa forme rectangulaire. Équivalent à margin-box.

  • shape-outside: margin-box;
    valeur margin-box pour shape-outside

    Le texte d'habillage (en bleu) contourne l'élément, en incluant les marges.

     

     

     

  • shape-outside: border-box;
    valeur border-box pour shape-outside

    Le texte d'habillage ignore les marges et contourne l'élément en se calant sur la bordure.

     

     

     

  • shape-outside: padding-box;
    valeur padding-box pour shape-outside

    Le texte d'habillage ignore les marges et la bordure, pour contourner les marges intérieures (padding) de l'élément.

     

     

     

  • shape-outside: content-box;
    valeur content-box pour shape-outside

    Le texte d'habillage ignore les marges, la bordure et les marges intérieures pour contourner uniquement le contenu de l'élément.

     

     

     

  • shape-outside: inset(...); shape-outside: circle(...); shape-outside: ellipse(...); shape-outside: polygon(...);

    Ces fonctions définissent la forme de l'habillage. Reportez-vous à leur description pour plus d'informations sur la syntaxe : inset(), circle(), ellipse(), polygon().

  • shape-outside: initial;

    La valeur initiale est none.

  • shape-outside: unset; shape-outside: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

shape-outside :
Contenu de

l'élément flottant
In hac habitasse platea dictumst. Proin eleifend massa ac ipsum porttitor, et elementum nibh rutrum. Quisque eget vulputate orci, in maximus eros. Sed diam elit, dapibus vel dignissim nec, lobortis at nibh. Proin imperdiet feugiat eleifend. Sed vehicula tincidunt sem, at molestie nulla lobortis et. Duis tincidunt ipsum ut nulla volutpat, eget mollis lectus facilisis. Integer a nulla faucibus eros rutrum finibus et a est. Mauris vehicula, lectus ut ultricies sodales, mi ipsum hendrerit dolor, vel dignissim turpis lorem at arcu. Mauris ac ullamcorper ligula. Aenean ac venenatis lorem. Curabitur ultrices lorem non quam viverra iaculis. Integer aliquam velit et arcu tempus, sed scelerisque lectus imperdiet. Praesent sodales lobortis ligula. In hac habitasse platea dictumst. Proin eleifend massa ac ipsum porttitor, et elementum nibh rutrum. Quisque eget vulputate orci, in maximus eros.

Voir aussi...

Formes géométriques - Propriétés.

  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)

Formes géométriques - Fonctions.

  • circle() : Définit un cercle.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • ellipse() : Définit une ellipse.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • polygon() : Définit une forme.

Éléments flottants (côte à côte) - Propriétés.

  • clear : Autorise ou interdit le côtoiement des éléments (habillage).
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • float : Positionnement relatif des éléments les uns par rapport aux autres.