Propriété CSS outline-offset
La propriété CSS outline-offset définit l'espace entre le contour et la bordure d'un élément. Découvrez ses valeurs et des exemples.
La propriété outline-offset spécifie la quantité d'espace entre le contour d'un élément et son bord de bordure. L'espace ajouté par outline-offset est toujours transparent, ce qui permet au fond de la page (ou à ce qui se trouve derrière l'élément) d'apparaître à travers l'écart.
Cette page explique ce que fait outline-offset, comment se comportent les valeurs positives et négatives, quand l'utiliser, et les pièges à éviter.
Différences entre les contours et les bordures
outline-offset n'a de sens que si vous comprenez comment les contours se comportent, car ils fonctionnent très différemment des bordures :
- Un contour est dessiné à l'extérieur du bord de bordure de l'élément — par défaut, il est aligné contre la bordure.
- Un contour ne prend pas de place dans la mise en page, donc l'ajouter ou le décaler ne déplace jamais les éléments environnants.
- Un contour peut être non rectangulaire (par exemple, il enveloppe chaque ligne d'un élément en ligne sur plusieurs lignes).
Comme un contour n'affecte pas la mise en page, outline-offset est un moyen sûr d'éloigner le contour de l'élément (ou de le rapprocher) sans recalculer le flux de la page. Cette propriété fait partie des propriétés CSS3.
Elle ne fait pas partie de la propriété raccourcie outline. Contrairement à outline-style, outline-color et outline-width, outline-offset doit toujours être défini comme sa propre déclaration.
| 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 outline-offset
outline-offset: length | initial | inherit;Exemple de la propriété outline-offset :
Exemple de code CSS outline-offset
<!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>Résultat
Dans l'exemple ci-dessus, l'espace entre le contour et la bordure est de 10px, et le fond de la page apparaît à travers cet écart transparent.
Valeurs négatives
outline-offset accepte également des longueurs négatives. Un décalage négatif tire le contour vers l'intérieur, de sorte qu'il est dessiné sur le rembourrage/contenu de l'élément plutôt qu'autour de lui :
outline-offset: -5px; /* outline moves 5px inside the border edge */C'est utile lorsque vous voulez un anneau de focus qui se trouve à l'intérieur d'un élément très compact (par exemple, un bouton accolé au bord d'un conteneur) sans que le contour soit rogné par un ancêtre avec overflow: hidden. Un décalage négatif plus grand que l'élément fait s'effondrer et disparaître le contour.
Quand l'utiliser
- Anneaux de focus espacés. Associez
:focus-visibleà un petit décalage positif pour que l'anneau de focus clavier ne serre pas l'élément de trop près. Ne supprimez jamais le contour entièrement sans en fournir un remplaçant — c'est la principale aide pour les utilisateurs au clavier. - Effets décoratifs de « double bordure » sans ajouter un second élément, car l'écart du décalage révèle l'arrière-plan.
- Éviter les anneaux rognés à l'intérieur des conteneurs à défilement, en utilisant un petit décalage négatif.
Valeurs
| Valeur | Description |
|---|---|
| length | Espace entre le contour et le bord de bordure d'un élément. Peut être négatif pour dessiner le contour à l'intérieur du bord de bordure. La valeur par défaut est 0. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |
Points à retenir
outline-offsetn'est pas hérité — les enfants ne le récupèrent pas automatiquement.- Les pourcentages ne sont pas autorisés ; seules les unités de longueur (
px,em,rem, etc.) fonctionnent. - Le décalage ne s'affiche que lorsqu'un contour est réellement visible, c'est-à-dire lorsque outline-style n'est pas
noneet que la largeur est supérieure à zéro. - L'écart est transparent —
outline-offsetne peut pas avoir sa propre couleur.