inset
Un raccourci qui définit top, right, bottom et left en une seule déclaration.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- éléments positionnés (position différente de static)
- JavaScript
element.style.inset = "0"
Exemple
#.cover {
position: relative;
}
.cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}<div class="cover" style="height: 150px; border-radius: 12px; overflow: hidden; background: url('/collections/covers/jak-zostac-programista.webp') center / cover;"></div>Définition et utilisation
#La propriété inset est un raccourci pour les quatre propriétés de décalage : top, right, bottom et left. Elle fonctionne comme margin ou padding : une valeur définit tous les côtés, deux valeurs définissent séparément le vertical et l’horizontal, et quatre valeurs définissent dans l’ordre le haut, la droite, le bas et la gauche.
L’usage le plus courant est inset: 0 sur un élément avec position: absolute. L’élément s’étire alors sur tout le parent, ce qui est pratique pour les superpositions, les arrière-plans et l’assombrissement d’images.
Tout comme les décalages individuels, inset ne fonctionne que sur les éléments dont le position est différent de static.
Syntaxe
#inset: <haut> <droite>? <bas>? <gauche>?;Valeurs
#- L’élément s’étire sur toute la surface du point de référence.
- Un espacement égal de 16px de tous les côtés.
- La première valeur correspond au haut et au bas, la seconde à la gauche et à la droite.
- Quatre valeurs : l’élément se colle au coin inférieur gauche.
Valeurs en pratique
#0
.demo { inset: 0; }16px
.demo { inset: 16px; }20px 40px
.demo { inset: 20px 40px; }auto auto 12px 12px
.demo { inset: auto auto 12px 12px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#inset: 0associé àmargin: autoet une taille connue est un moyen simple de centrer un élément absolu.- Pour des fenêtres modales plein écran, combinez
position: fixedavecinset: 0.
Entrées associées
#- positionChoisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
- topÉloigne un élément positionné du bord supérieur de son point de référence.
- leftÉloigne un élément positionné du bord gauche de son point de référence.
- z-indexDétermine quel élément se trouve au-dessus quand des éléments se chevauchent.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.