La propriété margin-inline est un raccourci pour définir les marges extérieures à gauche et à droite de l'élément, et remplace les propriétés margin-left et margin-right.
Elle peut être utilisée avec les propriétés margin-block pour définir la marge en haut et en bas de l'élément.
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
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; }
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: |
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 87 | 87 | 66 | 14.1 | 73 |
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>
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.
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT