Propriété de marge de style

Définition et utilisation

marge Cette propriété définit ou retourne la marge de l'élément.

Cette propriété peut accepter une à quatre valeurs :

  • Une valeur, par exemple : div {marge: 50px} - Toutes les quatre marges extérieures sont de 50px
  • Deux valeurs, par exemple : div {marge: 50px 10px} - La marge externe supérieure et inférieure est de 50px, la marge externe latérale est de 10px
  • Trois valeurs, par exemple : div {marge: 50px 10px 20px} - La marge externe supérieure est de 50px, la marge externe latérale est de 10px, la marge externe inférieure est de 20px
  • Quatre valeurs, par exemple : div {margin: 50px 10px 20px 30px} - La marge extérieure supérieure est de 50px, la marge extérieure droite de 10px, la marge extérieure inférieure de 20px et la marge extérieure gauche de 30px

Les propriétés margin et padding insèrent de l'espace autour de l'élément. Cependant, la différence réside en ce que margin insère de l'espace autour de la bordure, tandis que padding insère de l'espace à l'intérieur de la bordure de l'élément.

Voir aussi :

Tutoriel CSS :Marge extérieure CSS

Manuel CSS :Propriété margin

Exemple

Exemple 1

Définit les quatre marges extérieures de l'élément <div> :

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Essayer par vous-même

Exemple 2

Modifie les quatre marges extérieures de l'élément <div> en "25px" :

document.getElementById("myDiv").style.margin = "25px";

Essayer par vous-même

Exemple 3

Retourne la marge extérieure de l'élément <div> :

alert(document.getElementById("myDiv").style.margin);

Essayer par vous-même

Exemple 4

Différence entre les propriétés margin et padding :

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Essayer par vous-même

Syntaxe

Retourner la propriété margin :

object.style.margin

Définir la propriété margin :

object.style.margin = "%|length|auto|initial|inherit"

Valeur de l'attribut

Valeur Description
% Définit la marge extérieure en pourcentage de la largeur de l'élément parent.
length Définit la marge extérieure en unité de longueur.
auto Le navigateur définit la marge extérieure (les quatre marges extérieures seront égales).
initial Définit cette propriété à sa valeur par défaut. Voir aussi initial.
inherit Inhérite cette propriété de l'élément parent. Voir aussi inherit.

Détails techniques

Valeur par défaut : 0
Valeur de retour : Une chaîne, représentant la marge extérieure de l'élément.
Version CSS : CSS1

Compatibilité avec les navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support