Marge de style Propriété
Exemple
Définissez les quatre marges d'un élément <div> :
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Définition et utilisation
La propriété margin définit ou renvoie les marges d'un élément.
Cette propriété peut prendre de une à quatre valeurs :
- Une valeur, comme : div {margin : 50px} - les quatre marges seront de 50px
- Deux valeurs, comme : div {margin : 50px 10px} - les marges supérieure et inférieure seront de 50px, les marges gauche et droite seront de 10px
- Trois valeurs, comme : div {margin : 50px 10px 20px} - la marge supérieure sera de 50px, les marges gauche et droite seront de 10px, la marge inférieure sera de 20px
- Quatre valeurs, comme : div {margin : 50px 10px 20px 30px} - la marge supérieure sera de 50px, la marge de droite sera de 10px, la marge inférieure sera de 20px, la marge de gauche sera de 30px
La propriété margin et la propriété padding insèrent toutes deux un espace autour d'un élément. Cependant, la différence est que margin insère l'espace autour de la bordure, tandis que padding insère l'espace dans la bordure d'un élément.
Prise en charge du navigateur
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
Syntaxe
Renvoie la propriété margin :
object.style.margin
Définissez la propriété margin :
object.style.margin = "%|length|auto|initial|inherit"
Valeurs de propriété
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Détails techniques
| Valeur par défaut: | 0 |
|---|---|
| Valeur de retour : | Une chaîne, représentant les marges d'un élément |
| Version CSS | CSS1 |
Plus d'exemples
Exemple
Changez les quatre marges d'un élément <div> en "25px":
document.getElementById("myDiv").style.margin = "25px";
Exemple
Renvoie les marges d'un élément <div> :
alert(document.getElementById("myDiv").style.margin);
Exemple
Différence entre la propriété margin et la propriété padding :
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Pages connexes
Tutoriel CSS : Marge CSS
Référence CSS : propriété margin
❮ Objet de style