Margin : propriétés

Les propriétés de marge : 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' et 'margin'

Ces propriétés spécifient la largeur de l'aire de la marge d'une boîte. La propriété raccourcie 'margin' spécifie la valeur de la marge pour les quatre côtés à la fois, les autres propriétés fixant celle de leur côté respectif.

Les propriétés définies ici se réfèrent au type de valeur <marge-largeur>, celui-ci accepte une des valeurs suivantes :

<longueur>

Spécifie une largeur fixe ;

<pourcentage>

Le pourcentage est calculé par rapport à la largeur du bloc conteneur de la boîte générée. Ceci est vrai aussi pour les propriétés 'margin-top' et 'margin-bottom', sauf dans un contexte de page où le pourcentage se réfère à la hauteur de la boîte de la page.

auto

Voir le chapitre traitant du calcul des largeurs et hauteurs de marge pour son comportement.

Les valeurs négatives pour les propriétés de marge sont admises, sous réserve des implémentations particulières des agents utilisateurs.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Valeur :	<marge-largeur> | inherit
Initiale :	0
S'applique à :	tous les éléments
Héritée :	non
Pourcentage :	se rapporte à la largeur du bloc conteneur
Média :	visuel

Ces propriétés spécifient les marges du haut, de droite, du bas et de gauche d'une boîte.

Exemple(s) :

H1 { margin-top: 2em }

'margin'

Valeur :	<marge-largeur>{1,4} | inherit
Initiale :	non définie pour les propriétés raccourcies
S'applique à :	tous les éléments
Héritée :	non
Pourcentage :	se rapporte à la largeur du bloc conteneur
Médias :	visuel

La propriété raccourcie 'margin' sert à spécifier de manière groupée les propriétés 'margin-top', 'margin-right', 'margin-bottom' et 'margin-left' dans la feuille de style.

Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour la marge du haut et celle du bas, et la seconde pour la marge droite et celle de gauche. Avec trois valeurs, la marge du haut reçoit la première valeur, les marges gauche et droite la deuxième et la marge du bas la troisième. Pour quatre valeurs, celles-ci s'appliquent respectivement aux marges du haut, de droite, du bas et de gauche.

Exemple(s) :

BODY { margin: 2em }         /* les quatres marges reçoivent la valeur 2em */
BODY { margin: 1em 2em }     /* les marges du haut et du bas = 1em, de droite et de gauche = 2em */
BODY { margin: 1em 2em 3em } /* haut=1em, droite=2em & gauche=2em, bas=3em */

Cette dernière règle équivaut à l'exemple ci-dessous :

BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;        /* valeur copiée du côté opposé (droit) */
}

La fusion des marges

Dans cette spécification, l'expression marges de fusion signifie que les marges adjacentes (sans qu'une aire d'espacement ou de bordure ne les séparent) de deux ou plusieurs boîtes (celles-ci pouvant être l'une à côté de l'autre ou imbriquées), ces marges se combinent pour n'en former qu'une seule.

En CSS2, les marges horizontales ne fusionnent jamais.

Les marges verticales peuvent fusionner entre certaines boîtes :

• Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent. La largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes. Dans le cas de marges négatives, on soustrait la plus grande des valeurs des marges négatives adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes. Et s'il n'y pas de marges positives, on déduit de zéro la plus grande des marges négatives, en valeur absolue. Remarque Les boîtes limitrophes peuvent être générées par des éléments qui n'ont aucune parenté en tant que frères ou ancêtres ;
• Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas ;
• Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas.

Consulter les exemples de marges, d'espacements et de bordures pour une illustration de la fusion des marges.