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é box-decoration-break

Description de la propriété box-decoration-break.

box-decoration-break définit comment sont traitées les propriétés de décoration lorsque des éléments sont fragmentés sur plusieurs colonnes ou plusieurs lignes. Lors de l'impression la fragmentation peut être d'une page sur l'autre.

Les propriétés de décoration incluent la bordure, les marges, extérieures et intérieures, le fond et la découpe éventuelle (clip).

Un petit exemple sera plus parlant : ce texte comporte
une bordure rouge
et est fragmenté sur plusieurs lignes
.

Valeurs pour box-decoration-break.

  • box-decoration-break: slice;
    box-decoration-break:slice

    Valeur par défaut. Les différents fragments sont considérés comme un élément unique. La marge du haut par exemple n'est appliquée qu'au premier fragment ; la marge du bas seulement au dernier fragment. Les bordures englobent les différents fragments comme s'il s'agissait d'un élément unique.

  • box-decoration-break: clone;
    box-decoration-break:clone

    Chacun des fragments est traité comme un élément à part entière. Les marges sont appliquées à chacun des fragments et les bordures englobent séparément chacun des fragments.

  • box-decoration-break: initial;

    La valeur initiale est slice.

  • box-decoration-break: unset; box-decoration-break: inherit;

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

Simulateur.

Ajouter un préfixe :
box-decoration-break :
-webkit-box-decoration-break :
Exemple de rendu de la propriété box-decoration-break
sur un élément du type inline
fragmenté sur plusieurs lignes
(par des balises br/).
Exemple de rendu de la propriété box-decoration-break
sur un élément du type block fragmenté sur deux colonnes. L'effet est visible sur la bordure mais également sur les marges de l'élément.
Lorsqu'une image de fond est appliquée à l'élément, sa répétition et/ou son positionnement sont également influencés par la valeur de la propriété box-decoration-break. Cela se voit nettement sur cet exemple car l'image de fond est suffisamment grande pour ne pas être répétée.

Prise en charge de la propriété box-decoration-break par les navigateurs.

Cette propriété est encore mal gérée par les navigateurs. N'hésitez pas à utiliser les syntaxe préfixées par -moz- et -webkit- pour améliorer la compatibilité.

Afficher les versions antérieures   Afficher la version à venir