Les propriétés relatives aux marges
margin, margin-left, margin-top, margin-inline-start, etc.
Résumé des caractéristiques de la propriété margin
auto
0
margin
passe progressivement d'une valeur à une autre.Description de la propriété margin
.
margin
définit la taille des marges, c'est à dire l'espace réservé tout autour de l'élément,
à l'extérieur de sa bordure. Ne pas confondre avec les marges intérieures qui sont gérées par la propriété
padding
.
margin
est une propriété raccourcie qui permet de définir en une seule écriture les valeurs
des quatre marges, soit les propriétés :
margin-top
: marge du haut.margin-right
: marge de droite.margin-bottom
: marge du bas.margin-left
: marge de gauche.
margin
accepte de 1 à 4 valeurs, mais dans tous les cas, les quatre marges sont modifiées : même si une seule valeur
est spécifiée, elle sera appliquée aux quatre marges (voir les détails de syntaxe plus loin).
Les marges sont comptées à partir de l'élément parent si l'élément est fils unique (pas d'autres éléments dans ce parent), ou à partir des éléments précédent et suivant lorsqu'il y a d'autres éléments dans le parent.
Fusion des marges.
Les marges haute et basse entre les blocs successifs ne s'ajoutent pas : le navigateur applique celle des marges qui est la plus grande. Ce mécanisme de fusion ne se produit que pour les marges dans le sens vertical : si des blocs sont affichés côte à côte, leurs marges gauche et droite ne fusionnent pas.
Reportez-vous également à la propriété margin-trim
pour des compléments d'information sur la gestion
des marges entre éléments du même type.
Centrage d'un élément du type block
.
Lorsque les marges droite et gauche sont fixées à la valeur auto
, elles ont pour conséquence le centrage de l'élément dans la
largeur de son parent.
Prise en charge des langues non latines.
Si du texte en langue non latine est envisagé (arabe ou CJK par exemple), il vaut mieux raisonner avec les propriétés dites "logiques", c'est à dire celles qui prennent en compte la direction et le sens d'écriture. Par exemple, les langues arabes s'écrivent de la droite vers la gauche, ce qui est le contraire des langues latines (européennes) qui s'écrivent de la gauche vers la droite. Les propriétés logiques relatives aux marges sont les suivantes :
margin-block-start
: marge au début du bloc, équivalente àmargin-top
pour les langues européennes.margin-block-end
: marge à la fin du bloc, équivalente àmargin-bottom
pour les langues européennes.margin-inline-start
: marge au début des lignes, équivalente àmargin-left
pour les langues européennes.margin-inline-end
: marge en fin des lignes, équivalente àmargin-right
pour les langues européennes.margin-block
: accepte deux valeurs qui correspondent àmargin-block-start
et àmargin-block-end
margin-inline
: accepte deux valeurs qui correspondent àmargin-inline-start
et àmargin-inline-end
Il faut ajouter deux propriétés raccourcies :
Remarque : la propriété raccourcie margin
ne traite que les marges physiques : son effet sera donc indépendant
de la direction et du sens d'écriture.
Le simulateur ci-dessous donne les équivalences pour les principales familles de langues.
margin-top
margin-left
margin-right
margin-bottom
Syntaxes pour margin
.
- margin: auto;
Les marges sont déterminées par le navigateur. Elles peuvent être différentes suivant le type d'élément (p, div...).
Particularité : lorsque les marges droite et gauche sont fixées toutes les deux à la valeurauto
, elles ont pour conséquence le centrage horizontal de l'élément. Cette particularité n'est pas valable dans le sens vertical. - margin: 15px 10px 10px 0px; a b c d
De un à quatre nombres qui définissent la taille des marges.
Ce sont des nombres positifs ou négatifs, suivis d'une unité de dimension (voir les unités CSS de dimension) et séparés par des espaces.
Remarque : les valeurs négatives peuvent décaler l'élément en dehors de la zone visible.Les pourcentages sont calculés par rapport à la largeur du parent, ce qui est logique pour les marges horizontales (
margin-left
etmargin-right
), mais peut surprendre dans le cas des marges verticales (margin-top
etmargin-bottom
).
Calculer les marges verticales par rapport à la hauteur de l'élément parent conduirait à un calcul circulaire insoluble. En effet, la hauteur d'un bloc est déterminée par son contenu (à moins qu'elle ne soit fixée avec la propriétéheight
). Or la hauteur du contenu dépend des marges des éléments internes. Si celles-ci dépendaient également de la hauteur du parent on aurait un gros problème de calcul circulaire.En fait l'utilisation de pourcentages pour les marges verticales est généralement peu intéressante.
Voici comment sont attribuées les valeurs en fonction du nombre de valeurs indiquées :
- Si une seule valeur est précisée, elle s'applique aux quatre marges.
- Si deux valeurs sont précisées,
- la première définit les marges haute et basse,
- la deuxième valeur définit les marges gauche et droite. - Lorsque trois valeurs sont indiquées, elle définissent
- la marge du haut,
- les marges gauche et droite,
- la marge du bas. - Enfin, si les quatre valeurs sont précisées, elles définissent
chacune des marges, dans l'ordre suivant :
- marge du haut,
- marge de droite,
- marge du bas,
- marge de gauche.
margin:a;
Une seule valeur.
margin:a b;
Deux valeurs.
margin:a b c;
Trois valeurs.
margin:a b c d;
Quatre valeurs. La valeur initiale est :
.0
Animation de la propriété margin
.
L'animation des marges est souvent utilisées pour donner l'impression d'un bloc qui se déplace sur l'écran.
Manipulation des marges par programme.
Les codes donnés ci-après sont donnés pour margin-top
mais seront facilement modifiables pour s'adapter aux autres propriétés
relatives aux marges.
Le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
Javascript accepte deux syntaxes pour modifier la valeur de margin-top
.
La première syntaxe utilise la notation typique de CSS (le kebab-case : un tiret pour séparer les mots), tandis que la deuxième syntaxe
est plus proche de la syntaxe habituelle de javascript, avec la notation en camel-case (une majuscule pour séparer les mots).
function setMarginTop(el) {
el.style['margin-top']='120px';
}
function setMarginTop(el) {
el.style.marginTop='120px';
}
Relire la valeur de margin-top
en Javascript peut également se faire suivant deux syntaxes.
La propriété doit avori été affectée directement à l'élément lui-même et non pas à une classe ou un autre sélecteur.
function getMarginTop(el) {
return el.style['margin-top'];
}
function getMarginTop(el) {
return el.style.marginTop;
}
Pour lire la valeur calculée de margin-top
, utilisez le code suivant. La marge est retournée en pixels, quelque soit
l'unité qui a été utilisée pour la définir dans la feuille de styles.
function getMarginTop(el) {
return window.getComputedStyle(el).getPropertyValue('margin-top');
}
Avec JQuery, deux syntaxes sont également possibles pour modifier la valeur de la propriété margin-top
de l'élément el
:
function setMarginTop(el) {
$(el).css('margin-top','120px');
}
function setMarginTop(el) {
$(el).css('marginTop','120px');
}
Deux syntaxes aussi pour lire la valeur calculée de la propriété margin-top
.
Comme en Javascript, la marge est retournée en pixels.
function getMarginTop(el) {
return $(el).css('margin-top');
}
function getMarginTop(el) {
return $(el).css('marginTop');
}
Simulateur.
Le simulateur ci-dessous vous aidera à vous familiariser avec la notion de début de bloc, début de ligne, etc. en fonction de la langue. Les marges sont matérialisées en bleu.
« Les marges sont un fondement esthétique de la mise en pages, qui ancre la place du texte en le cerclant d’un espace silencieux. Elles font ressortir le texte pour lui donner toute son épaisseur et installent une quiétude propice à la lecture. Les marges ont aussi un rôle ergonomique ; les grands fonds permettent aux pouces de se poser, les petits fonds évitent au texte d’aller se perdre dans la reliure. »
Prise en charge par les navigateurs (compatibilité).
est sans doute une des propriétés les plus anciennes de CSS : elle est reconnue par tous les navigateurs. Attention cependant, depuis l'introduction des propriétés et valeurs logiques, certains navigateurs sont à la traîne pour les traitements dépendant de la direction et du sens d'écriture.
margin
. Bien entendu, aucun problème : cette propriété existe depuis la toute première version de CSS.
margin-inline
et margin-block
qui agissent en fonction du sens et de la direction
d'écriture de la langue utilisée.
margin
margin-inline
margin-block
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que margin
.
Les spécifications CSS éditées par le W3C sont organisées en modules. margin
fait partie du Module CSS - Modèle de blocs (CSS Box Model Module). Les définitions suivantes sont également décrites dans ce même module.