Propriété css margin-inline

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.

Liste des propriétés css

Marges extérieures simplifiées avec margin-inline en CSS