Attribut margin CSS

Définition et utilisation

La propriété abrégée margin définit toutes les propriétés de marge dans une seule déclaration. Cette propriété peut avoir de 1 à 4 valeurs.

Explication

Cette propriété abrégée définit la largeur de toutes les marges d'un élément ou la largeur des marges de chaque côté.

Les marges verticales adjacentes des éléments en bloc se combinent, tandis que les éléments en ligne n'occupent pas de marge supérieure et inférieure. Les marges latérales des éléments en ligne ne se combinent pas. De même, les marges des éléments flottants ne se combinent pas. Il est possible de spécifier des valeurs de marge négatives, mais il faut être prudent lors de leur utilisation.

Remarque :Les valeurs négatives peuvent être utilisées.

Exemple 1

margin:10px 5px 15px 20px;
  • La marge supérieure est de 10px
  • La marge droite est de 5px
  • La marge inférieure est de 15px
  • La marge gauche est de 20px

Exemple 2

margin:10px 5px 15px;
  • La marge supérieure est de 10px
  • La marge droite et la marge gauche sont de 5px
  • La marge inférieure est de 15px

Exemple 3

margin:10px 5px;
  • La marge supérieure et la marge inférieure sont de 10px
  • La marge droite et la marge gauche sont de 5px

Exemple 4

margin:10px;
  • Les 4 marges sont de 10px

Voir également :

Tutoriel CSS :Marge extérieure CSS

Manuel de référence HTML DOM :Attribut margin

Exemple

Définir les 4 marges de l'élément p :

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

Essayez-le vous-même

Syntaxe CSS

margin: length|auto|initial|hérité;

Valeur de l'attribut

Valeur Description
auto La marge est calculée par le navigateur.
length Définit la valeur de la marge en unité spécifique, par exemple pixels, centimètres, etc. La valeur par défaut est 0px.
% Spécifie la marge en pourcentage de la largeur de l'élément englobant.
hérité Définit que la marge doit être héritée de l'élément parent.

Détails techniques

Valeur par défaut : 0
Héritabilité : non
Version : CSS1
Syntaxe JavaScript : object.style.margin="10px 5px"

Plus d'exemples

Toutes les propriétés de marge dans une seule déclaration
Cet exemple montre comment configurer toutes les propriétés de marge dans une seule déclaration.

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5