Définit la marge intérieure droit d'un élément
La propriété CSS margin-inline-start : syntaxe, exemples et valeurs
La propriété CSS margin-inline-start est utilisée pour définir la marge extérieure du début d'un élément. Elle remplace la propriété margin-left pour prendre en considération les différente directions.
C'est-à-dire que pour les documents qui utilisent une direction de texte différente de l'orientation standard (de gauche à droite). En spécifiant la propriété cs margin-inline-start, vous pouvez garantir que la marge extérieure du début de l'élément sera correctement définie.
Doonc la propriété CSS margin-inline-start est utilisée pour définir la marge extérieure du début d'un élément indépendamment de la direction de lecture du document.
Sachez que le début d'un élément dépond de la direction de l’écriture :
- pour l’écriture de gauche vers la droite : le début de l’élément est la gauche
- pour l’écriture de la droite vers la gauche : le début de l’élément est la droite
- pour l’écriture du haut vers le bas : le début de l’élément est le haut …
Voici un exemple d'utilisation de la propriété margin-inline-start :
Exemple : Copier le code
<style>
.mon-element {
margin-inline-start: 10px;
}
</style>
<div class="mon-element">
Mon contenu
</div>
Dans cet exemple, l'élément avec la classe "mon-element" aura une marge extérieure de 10 pixels du début du contenu.
La syntaxe générale de la propriété CSS margin-inline-start est la suivante :
margin-inline-start: [valeur];
Les valeurs possibles pour margin-inline-start sont :
- auto - La marge sera automatiquement définie en fonction du contenu de l'élément.
- <length> - La marge sera définie en utilisant une valeur de longueur, telle que 10px ou 2em.
- <percentage> - La marge sera définie en utilisant une valeur de pourcentage, telle que 10% ou 5%.
Voici un exemple d'utilisation de différentes valeurs pour margin-inline-start :
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété margin-inline-start </title>
<style>
div{background-color:lightblue;
border: solid 1px black;
}
.element-1 {
margin-inline-start: 10px;
}
.element-2 {
margin-inline-start: 5%;
}
.element-3 {
margin-inline-start: auto;
}
}
</style>
</head>
<body>
<h1>CSS la propriété margin-inline-start</h1>
<div class="element-1">Mon contenu 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna molestie at.</div>
<div class="element-2">Mon contenu 2 : Diam sollicitudin tempor id eu nisl nunc mi ipsum. Mi tempus imperdiet nulla malesuada pellentesque elit eget. </div>
<div class="element-3">Mon contenu 3 : sollicitudin aliquam ultrices sagittis orci a scelerisque. Urna id volutpat lacus laoreet non curabitur gravida arcu. Elit duis tristique sollicitudin nibh sit amet commodo. </div>
</body>
</html>
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.marginInlineStart="50px" |
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 | 69 | 79 | 68 | 14.1 | 56 |
Remplacer l'ancienne propriété css margin-left par la nouvelle propriété css margin-inline-start : pourquoi et comment ?
La propriété margin-left a été remplacée par margin-inline-start pour une meilleure compréhension et une plus grande flexibilité dans le développement de sites web. La propriété margin-inline-start s'adapte automatiquement à la direction du texte (gauche à droite ou droite à gauche), ce qui signifie que le développeur n'a pas besoin de changer la valeur de la propriété pour s'adapter à différentes langues et cultures.
Pour remplacer margin-left par margin-inline-start, il suffit de changer la propriété dans le code CSS :
Ancien code css :
.element {
margin-left: 10px;
}
Nouveau code css :Exemple : Copier le code
.element {
margin-inline-start: 10px;
}
En outre, la propriété margin-inline-start peut également être utilisée avec d'autres propriétés, telles que margin-inline, pour spécifier les marges sur plusieurs axes. Par exemple, pour spécifier les marges à gauche et en haut d'un élément, vous pouvez utiliser :
Exemple : Copier le code
.element {
margin-inline-start: 10px;
margin-top: 20px;
}
Cela permet une plus grande flexibilité dans la définition des marges pour différents éléments et résolutions d'écran.
En conclusion, le remplacement de margin-left par margin-inline-start est un pas en avant pour une meilleure compréhension et une plus grande flexibilité dans le développement de sites web. Les développeurs peuvent maintenant spécifier les marges en fonction de la direction du texte et utiliser des propriétés plus adaptées pour les différents éléments et résolutions d'écran.