La propriété margin définit l'espace entourant un élément.  Il est possible d'utiliser des valeurs négatives pour être par dessus un contenu.  Le dessus, droite, bas et gauche peut être défini séparément.

Si margin est suivie d'une valeur alors cette dernière sera appliquée à toutes les marges.

Si margin est suivie de deux valeurs alors la première sera appliquée aux marges horizontales et la seconde aux marges verticales.

Si margin est suivie de quatre valeurs alors elles correspondent dans l'ordre à la marge dessus, droit, bas, gauche.

Les marges peuvent être définies des manières suivantes :
Auto                Le navigateur décide
length               Définir un nombre fixe. 0 est par défaut
%                    Définir en % de la hauteur totale du document

Définir la marge de gauche d'un texte

p.leftmargin {margin-left: 2cm}
dans la page <p class="leftmargin">...</p>

Définir la marge de droite d'un texte

 

p.rightmargin {margin-right: 8cm}

Dans la page: <p class="rightmargin">...</p>

Définir la marge du dessus d'un texte

 

p.topmargin {margin-top: 8cm}

Dans la page: <p class="topmargin">...</p>

Définir la marge du dessous d'un texte

p.bottommargin {margin-bottom: 8cm}

Dans la page: <p class="bottommargin">...</p>

Toutes les propriétés en une déclaration.

 

L'ordre de déclaration est en haut, à droite, en bas et à gauche.  Pour se le rappeler : Dans le sens des aiguilles d'une montre en partant par en haut.

p.margin {margin: 2cm 4cm 3cm 4cm}

<p class="margin">…</p>

Propriété	Description	Valeurs
margin	Permet de mettre toutes les propriétés sur une seule déclaration	margin-top margin-right margin-bottom margin-left
margin-top	Pour définir la marge du haut	auto length %
margin-right	Pour définir la marge de droite	auto length %
margin-bottom	Pour définir la marge du bat	auto length %
margin-left	Pour définir la marge de gauche	auto length %

 

 

CSS Marge interne (padding)