CSS margin (marge extérieure)

La propriété CSS margin définit l'espace autour des éléments.

margin

La marge efface la zone autour de l'élément (bordure extérieure). La marge n'a pas de couleur de fond et est complètement transparente.

La marge peut modifier individuellement les marges supérieure, inférieure, gauche et droite d'un élément, ou modifier toutes les propriétés en une seule fois.

valeurs possibles

Valeur Description
auto Définir les marges du navigateur.
Le résultat dépendra du navigateur
longueur Définir une marge fixe (en utilisant des pixels, pt, em, etc.)
% Définir une marge en utilisant un pourcentage.

RemarkLes marges peuvent utiliser des valeurs négatives, ce qui fait chevaucher le contenu.

Marge - propriétés de marge par côté

En CSS, il est possible de spécifier différentes marges pour différents côtés :

Exemple

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Essayez-le vous-même »

Marge - propriété raccourcie

Pour raccourcir le code, il est possible de spécifier toutes les propriétés de marge dans une seule propriété en utilisant margin. C'est ce qu'on appelle une propriété raccourcie.

La propriété raccourcie pour toutes les propriétés de marge estmargin :

Exemple

margin:100px 50px;

Essayez-le vous-même »

La propriété margin peut avoir entre une et quatre valeurs.

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

  • margin:25px 50px 75px;
    • la marge supérieure est de 25px
    • les marges gauche et droite sont de 50px
    • la marge inférieure est de 75px

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

  • margin:25px;
    • Les quatre marges sont de 25px
Examples

Plus d’exemples

Le réglage de la marge supérieure du texte utilise des valeurs en centimètres.
Cet exemple montre comment définir la marge supérieure d'un texte à l'aide d'une valeur en centimètres.

Définir Utilisez une valeur en pourcentage pour définir la marge inférieure du texte
Cet exemple montre comment définir la marge inférieure à l'aide d'une valeur en pourcentage, relative à la largeur de l'élément conteneur.

Toutes les propriétés de marge CSS

Propriété Description
margin Propriété raccourcie. Définit toutes les propriétés de marge en une seule déclaration.
margin-bottom Définit la marge inférieure d'un élément.
margin 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.
autres extensions