Propriété CSS outline-offset

La propriété outline-offset permet de spécifier l'espace entre un contour et le bord d'un élément. L'espace entre le contour et l'élément est transparent.

Il existe trois façons dont les contours diffèrent des bordures :

un contour est une ligne tracée à l'extérieur du bord de l'élément,
un contour peut être non rectangulaire,
un contour n'occupe pas d'espace.

Cette propriété fait partie des propriétés CSS3.

Elle ne fait pas partie de la propriété raccourcie outline. La propriété outline-offset doit être spécifiée séparément.

Valeur initiale	0
S'applique à	Tous les éléments.
Héritée	Non.
Animable	Oui. La largeur de l'espace est animable.
Version	CSS3
Syntaxe DOM	object.style.outlineOffset = "20px";

Syntaxe

Syntaxe CSS de outline-offset

css

outline-offset: length | initial | inherit;

Exemple de la propriété outline-offset :

Exemple de code CSS pour outline-offset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        margin: 20px;
        border: 2px dotted #000;
        background-color: #8ebf42;
        outline: 4px solid #666;
        outline-offset: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Outline-offset property example</h2>
    <div class="ex1">The outline-offset is 10px</div>
  </body>
</html>

Try it Yourself »

Résultat

Liste des valeurs CSS outline-offset

Dans l'exemple ci-dessus, l'espace entre le contour et la bordure est de 10px.

Valeurs

Valeur	Description
length	Espace entre le contour et le bord d'un élément. La valeur par défaut est 0.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Que peut-on dire de la propriété CSS outline-offset selon les informations fournies dans l'URL donnée ?

La propriété outline-offset ne fait pas partie de la norme CSS.La propriété outline-offset ajoute un espace entre un contour et le bord/la bordure d'un élément.La propriété outline-offset n'autorise que des valeurs positives, la valeur par défaut étant 0.La valeur initiale/par défaut de la propriété outline-offset est 0.La propriété outline-offset hérite de la valeur de son élément parent.Des valeurs en pourcentage peuvent être utilisées avec la propriété outline-offset.

Propriété CSS outline-offset ​

Syntaxe ​

Exemple de la propriété outline-offset : ​

Résultat ​