Marge CSS


Table des matières

    Afficher la table des matières


Les marges sont utilisées pour créer un espace autour des éléments, en dehors de toute bordure définie.


This element has a margin of 70px.

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>



Marges CSS

Les propriétés CSS margin sont utilisées pour créer un espace autour des éléments, en dehors de toute frontière définie.

Avec CSS, vous avez un contrôle total sur les marges. Il y a des propriétés pour définir la marge de chaque côté d'un élément (haut, droite, bas et gauche).


Marge - Côtés individuels

CSS a des propriétés pour spécifier la marge de chacun côté d'un élément :

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Toutes les propriétés de marge peuvent avoir les valeurs suivantes :

  • auto - le navigateur calcule la marge

  • longueur - spécifie une marge en px, pt, cm, etc.

  • % - spécifie une marge en % de la largeur de l'élément conteneur

  • hériter - spécifie que la marge doit être héritée de l'élément parent

Conseil : Les valeurs négatives sont autorisées.

Exemple

Définissez des marges différentes pour les quatre côtés d'un élément <p> :

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>




Marge - Propriété abrégée

Pour raccourcir le code, il est possible de préciser toutes les propriétés de marge dans une propriété.

La propriété margin est une propriété abrégée pour les propriétés de marge individuelles suivantes :

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Voici donc comment cela fonctionne :

Si la propriété margin a quatre valeurs :

margin: 25px 50px 75px 100px; 
  • la marge supérieure est de 25 px

  • la marge droite est de 50px

  • la marge inférieure est de 75 px

  • la marge gauche est de 100px

Exemple

Utilisez la propriété raccourcie margin avec quatre valeurs :

p {
  margin: 25px 50px 75px 100px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>


Si la propriété margin a trois valeurs :

margin: 25px 50px 75px;
  • la marge supérieure est de 25 px

  • les marges droite et gauche sont de 50 px

  • la marge inférieure est de 75 px

Exemple

Utilisez la propriété raccourcie margin avec trois valeurs :

p {	margin: 25px 50px 75px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>


Si la propriété margin a deux valeurs :

margin: 25px 50px;
  • les marges supérieure et inférieure sont de 25 px

  • les marges droite et gauche sont de 50 px

Exemple

Utilisez la propriété raccourcie margin avec deux valeurs :

p {	margin: 25px 50px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>
</html>


Si la propriété margin a une valeur :

margin: 25px;
  • les quatre marges sont de 25 px

Exemple

Utilisez la propriété raccourcie margin avec une valeur :

p {
  margin: 25px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>
</html>



La valeur automatique

Vous pouvez définir la propriété margin sur auto pour centrer horizontalement l'élément dans son conteneur.

L'élément occupera alors la largeur spécifiée et l'espace restant sera réparti à parts égales entre les marges gauche et droite.

Exemple

Utiliser la marge : auto :

div {
  width: 300px;
  margin: 
auto;
  border: 1px solid red;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>



La valeur héritée

Cet exemple permet d'hériter de la marge gauche de l'élément

de l'élément parent (<div>) :

Exemple

Utilisation de la valeur d'héritage :

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
    margin-left: 
inherit;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>



Toutes les propriétés de marge CSS

margin

Une propriété raccourcie pour définir toutes les propriétés de marge dans une seule déclaration

margin-bottom

Définit la marge inférieure d'un élément

margin-left

Définit la marge gauche d'un élément

margin-right

Définit la marge droite d'un élément

margin-top

Définit la marge supérieure d'un élément