Attribut MARGIN
Rôle
L’attribut margin permet d’appliquer une marge tout autour de l’élément HTML (dans l’ordre : en haut, à droite, en bas et à gauche).
Cet attribut est le raccourci de margin-left qui spécifie la marge extérieur à gauche, margin-right qui spécifie la marge extérieur à droite, margin-top qui spécifie la marge extérieur en haut et margin-bottom qui spécifie la marge extérieur en bas
Cet attribut peut prendre plusieurs valeurs possibles :
* 4 valeurs pour pouvoir gérer toutes les marges séparément : dans l’ordre ‘top-droite-bas-gauche’
margin : 10px 20px 10px 20px ;
* 3 valeurs : la quatrième valeur (la marge de gauche) a la même valeur que la deuxième valeur (la marge de droite)margin : 10px 20px 10px ;
* 2 valeurs : la première pour les marges haut-bas, la deuxième pour les marges droite-gauche
margin : 10px 20px ;
* 1 même valeur pour les quatres margesmargin : 10px ;
Version : CSS1
Héritage (inherit) : non
Propriété Javascript : element.style.margin
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
div{
width: 300px;
margin: 20px;
background-color: silver;
}
– Le code HTML
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, suscipit! Culpa mollitia quae quo architecto corrupti vitae, laboriosam distinctio, ex aperiam odio quam officia </div>
Résultat
Compatibilité
L’attribut margin est pris en charge par tous les principaux navigateurs
Valeurs
Les différentes valeurs de l’attribut margin sont:
- auto
- Le navigateur calcule une marge automatiquement .
Syntaxe :
margin-left : auto - length
- Définit une valeur en px, pt, cm, em.
Syntaxe :
margin : 20px - pourcentage
- Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
margin : 30% - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
margin : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
margin : inherit
A voir aussi
box-sizing– clip– height– width– padding– overflow– min-width– outline– resize
