XPATH syntaxe
La propriété margin-inline spécifie la marge au début et à la fin dans le sens de la ligne c'est-à-dire de gauche vers la droite, et est une propriété raccourcie pour les propriétés suivantes :
margin-inline-start
margin-inline-end
Syntaxe de la propriété css margin-inline
La syntaxe pour définir les marges extérieures gauche et droite est la suivante :
élément {
margin-inline: valeur1 valeur2;
}
ou
élément {
margin-inline: valeur;
}
Liste des valeurs possibles
- valeur numérique avec unité : px, em, %, etc.
- auto : la valeur auto est utilisée pour laisser le navigateur déterminer la marge en fonction d'autres éléments sur la page.
- initial : définit la valeur par défaut de la propriété.
- inherit : hérite la valeur de la propriété de l'élément parent.
Les valeurs de la propriété margin-inline peuvent être définies de différentes manières :
Si la propriété margin-inline a deux valeurs :margin-inline : 10px 50px ;
la marge au début est de 10px
la marge à la fin est de 50px
Si la propriété margin-inline a une seule valeur :margin-inline : 10px ;
la marge au début et la marge à la fin sont égales, elle est ici de 10px.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 87 | 87 | 66 | 14.1 | 73 |
Exemple d'utilisation
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété margin-inline </title>
<style>
div{background-color:lightblue}
div.ex {
border: solid black 1px;
margin-inline: 0px 35px;
}
div.ex1 {
border: solid black 1px;
margin-inline: 35px;
}
div.ex2 {
border: solid black 1px;
margin-inline: 35px 0px;
}
</style>
</head>
<body>
<h1>CSS la propriété margin-inline</h1>
<div class="ex">Ce dive n'a pas de marge au debut
mais a une marge de 35px à la fin</div>
<div class="ex1">Cet élément div a une marge de 35
pixels au début et à la fin dans le sens du bloc.
Donc il est séparé par un espace de 35px du
bord de la page.
</div>
<div class="ex2">Ce dive n'a pas de marge à la fin
mais a une marge de 35px au début</div>
</body>
</html>
Conseils et astuces
- 1- Utilisez la propriété margin-inline en combinaison avec la propriété margin-block pour définir les marges de l'élément sur tous les côtés.
- 2- Utilisez des valeurs numériques avec des unités pour un contrôle précis de la marge.
- 3- Utilisez la valeur auto pour laisser le navigateur déterminer la marge en fonction d'autres éléments sur la page.
- 4- Utilisez la propriété margin-inline-start et margin-inline-end pour définir les marges gauche et droite séparément.
Conclusion
En utilisant la propriété CSS margin-inline, vous pouvez facilement définir les marges extérieures de vos éléments HTML. Assurez-vous de connaître les valeurs possibles et les astuces pour en tirer le meilleur parti dans vos projets de développement web.