Parcours d’initiation CSS

Leçon 6

Définir des marges

Pour terminer, il serait utile de pouvoir définir la taille des marges sur les quatre côtés d’un élément. La propriété margin nous permet de manipuler toutes les propriétés de marges comme margin-top, margin-bottom, margin-right et margin-left.

Les valeurs de la propriété margin s’écrivent dans cet ordre :

margin: margin-top margin-right margin-bottom margin-left

margin: 10px 20px 30px 40px;

Si vous attribuez une seule valeur à la propriété margin, elle sera appliquée sur les quatre côtés. Par exemple, margin: auto; va attribuer la même marge à tous les côtés de l’élément ciblé et donc le centrer automatiquement.

1
2
3
4
5
6
7
8
9
div {
  width: 300px;
  height: 100px;
  margin-top: 25px;
  margin-right: auto;
  margin-bottom : 30px;
  margin-left: auto;
  background-color: green;
}