CSS - Inset : Guide ultime pour positionner des éléments

Bonjour à tous, futurs maîtres du CSS ! Aujourd'hui, nous plongeons dans le merveilleux monde de la propriété inset. En tant qu'enseignant en informatique de votre quartier, je suis excité de vous guider dans cette aventure. Faites-moi confiance, à la fin de ce tutoriel, vous serez des pros de l'inset !

Qu'est-ce que la propriété CSS Inset ?

Avant de sauter dans le grand bain, penchons-nous sur les bases. La propriété inset est comme un couteau suisse pour positionner des éléments en CSS. Il s'agit d'une propriété abrégée qui définit les quatre côtés de la position d'un élément en une seule fois. Imaginez-le comme une baguette magique qui peut placer votre élément exactement où vous le souhaitez sur la page.

Valeurs possibles et syntaxe

Décomposons les valeurs possibles et la syntaxe pour la propriété inset. Ne vous inquiétez pas si cela paraît un peu intimidant au départ - nous allons passer en revue chaque élément pas à pas !

Valeur	Description
auto	Le navigateur calcule l'inset
longueur	Spécifie l'inset en px, pt, cm, etc.
%	Spécifie l'inset en % de l'élément conteneur
inherit	Hérite de la valeur de l'élément parent
initial	Définit la propriété à sa valeur par défaut
unset	Réinitialise la propriété à sa valeur naturelle

La syntaxe de base pour la propriété inset est la suivante :

selecteur {
inset: valeur;
}

Maintenant, explorons différentes manières d'utiliser cette propriété puissante !

CSS Inset - Quatre valeurs de longueur

Lorsque vous fournissez quatre valeurs à la propriété inset, vous définissez les positions supérieure, droite, inférieure et gauche toutes à la fois. C'est comme donner à votre élément un grand câlin de tous les côtés !

.box {
position: absolute;
inset: 10px 20px 30px 40px;
}

Dans cet exemple, nous disons à notre élément .box de se positionner à 10px du haut, 20px de la droite, 30px du bas et 40px de la gauche de son élément conteneur. C'est comme donner à votre élément des instructions très spécifiques sur où se tenir !

CSS Inset - Trois valeurs de longueur

Que se passe-t-il lorsque nous utilisons seulement trois valeurs ? Le CSS devient intelligent ! Il suppose que la valeur de gauche doit être la même que celle de droite.

.box {
position: absolute;
inset: 10px 20px 30px;
}

Cela équivaut à inset: 10px 20px 30px 20px. Notre boîte est maintenant à 10px du haut, 20px des deux côtés droit et gauche, et 30px du bas. C'est comme dire à votre élément de se serrer un peu sur les côtés !

CSS Inset - Deux valeurs de longueur

Avec deux valeurs, le CSS devient encore plus intelligent. La première valeur s'applique à la fois au haut et au bas, tandis que la seconde s'applique à la fois à la gauche et à la droite.

.box {
position: absolute;
inset: 10px 20px;
}

Cela équivaut à inset: 10px 20px 10px 20px. Notre boîte est maintenant à 10px des deux côtés haut et bas, et 20px des deux côtés gauche et droit. C'est comme donner à votre élément un cadre symétrique !

CSS Inset - Une valeur de longueur

Lorsque vous utilisez seulement une valeur, elle s'applique aux quatre côtés. C'est comme envelopper votre élément dans un uniforme de espace !

.box {
position: absolute;
inset: 10px;
}

Cela équivaut à inset: 10px 10px 10px 10px. Notre boîte a maintenant un espace de 10px sur tous les côtés par rapport à son élément conteneur.

CSS Inset - Valeur en pourcentage

Les pourcentages sont super utiles lorsque vous souhaitez que votre mise en page soit réactive. Le pourcentage est calculé en fonction des dimensions de l'élément conteneur.

.box {
position: absolute;
inset: 10%;
}

Dans ce cas, notre boîte sera positionnée à 10% de distance de tous les côtés de son conteneur. Si le conteneur grandit ou diminue, le positionnement s'ajustera en conséquence. C'est comme donner à votre élément une bulle personnelle de espace en pourcentage !

CSS Inset - Valeurs mixtes

Le véritable plaisir commence lorsque nous mélangeons différentes unités. Vous pouvez utiliser une combinaison de pourcentages, de pixels et même le mot-clé auto.

.box {
position: absolute;
inset: 10% 20px auto 5em;
}

Ici, notre boîte est à 10% du haut, 20px de la droite, positionnée automatiquement du bas (ce qui signifie généralement qu'elle occupera tout l'espace restant), et 5em de la gauche. C'est comme donner à votre élément une empreinte de position unique !

CSS Inset - Valeur Auto

La valeur auto est particulièrement utile lorsque vous souhaitez que le navigateur calcule l'inset automatiquement.

.box {
position: absolute;
inset: auto 20px 10px;
}

Dans cet exemple, le haut est calculé automatiquement, tandis que la droite et la gauche sont définies à 20px, et le bas à 10px. C'est comme dire à votre élément "figure-toi le haut toi-même, mais respecte ces règles pour les autres côtés".

Propriétés liées à CSS Inset

Bien que inset soit incroyablement utile, il est bon de connaître ses composants individuels également. Ceux-ci sont top, right, bottom, et left. Vous pouvez les utiliser lorsque vous avez besoin d'un contrôle plus granulaire.

.box {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}

Cela donne le même résultat que inset: 10px 20px 30px 40px, mais vous permet d'ajuster chaque côté individuellement si nécessaire.

Conclusion

Et voilà, les amis ! Vous venez de faire un grand tour de la propriété CSS inset. De sa syntaxe de base à ses divers cas d'utilisation, vous avez maintenant le pouvoir de positionner des éléments avec précision et flexibilité.

Souvenez-vous, la clé pour maîtriser le CSS est la pratique. Alors, continuez, expérimentez avec ces exemples, mélangez et assortissez les valeurs, et voyez comment inset peut transformer vos mises en page. Avant de savoir dire, vous serez des pros de l'inset !

Bon codage, et puissent vos éléments toujours être parfaitement positionnés !

Credits: Image by storyset