La propriété CSS margin

margin est une propriété CSS simple qui a une syntaxe abrégée que j'oublie sans cesse, j'ai donc écrit cet article de référence

LemarginLa propriété CSS est couramment utilisée dans CSS pour ajouter de l'espace autour d'un élément.

Rappelles toi:

  • marginajoute de l'espace à l'extérieur d'une bordure d'élément
  • paddingajoute de l'espace à l'intérieur d'une bordure d'élément

Propriétés de marge spécifiques

margina 4 propriétés liées qui modifient la marge d'une seule arête à la fois:

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

L'utilisation de ceux-ci est très simple et ne peut pas être confondue, par exemple:

margin-left: 30px;
margin-right: 3em;

En utilisant lemarginsténographie

marginest un raccourci pour spécifier plusieurs marges en même temps, et en fonction du nombre de valeurs saisies, il se comporte différemment.

1 valeur

L'utilisation d'une seule valeur s'applique àtoutles marges: haut, droite, bas, gauche.

margin: 20px;

2 valeurs

L'utilisation de 2 valeurs applique la première àbas et haut, et la seconde àgauche droite.

margin: 20px 10px;

3 valeurs

L'utilisation de 3 valeurs applique la première àHaut, la seconde àgauche droite, le troisième àbas.

margin: 20px 10px 30px;

4 valeurs

L'utilisation de 4 valeurs applique la première àHaut, la seconde àdroit, le troisième àbas, le quatrième àgauche.

margin: 20px 10px 5px 0px;

Donc, l'ordre esthaut-droite-bas-gauche.

Valeurs acceptées

marginaccepte les valeurs exprimées dans tout type d'unité de longueur, les plus courantes sont px, em, rem, maisil en existe beaucoup d'autres.

Il accepte également les valeurs de pourcentage et la valeur spécialeauto.

Utilisantautopour centrer des éléments

autopeut être utilisé pour indiquer au navigateur de sélectionner automatiquement une marge, et il est le plus souvent utilisé pour centrer un élément de cette manière:

margin: 0 auto;
As said above, using 2 values applies the first to bottom & top, and the second to left & right.


The modern way to center elements is to use Flexbox, and its justify-content: center; directive.


Older browsers of course do not implement Flexbox, and if you need to support them margin: 0 auto; is still a good choice.


Using a negative margin


margin is the only property related to sizing that can have a negative value. It’s extremely useful, too.
Setting a negative top margin makes an element move over elements before it, and given enough negative value it will move out of the page.


A negative bottom margin moves up the elements after it.


A negative right margin makes the content of the element expand beyond its allowed content size.


A negative left margin moves the element left over the elements that precede it, and given enough negative value it will move out of the page.

  

  
Download my free CSS Handbook

  




More css tutorials:

Tech Wiki en ligne!