Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

Le dernier élément composant le modèle des boîtes CSS est la marge qui peut être personnalisée par la propriété CSS margin. Les marges CSS constituent un élément très difficile à cerner, et qui pose fréquemment de sérieux problèmes de mise en page chez les novices.

Introduction à la propriété CSS margin

A l'aide des CSS vous pouvez agir aussi sur les marges. Ceci est très utile pour faire aérer la page, et éviter le chevauchement des éléments. Juste à titre de rappel, la marge est l'espace vide qui entoure la bordure d'un élément XHTML :

la marge (margin) dans le modèle de boîtes CSS (box model)

A l'instar des autres propriétés CSS padding (propriété CSS padding : remplissage ou espacement) et border (propriété CSS border : bordure), vous avez la possibilité de spécifier une marge supérieur, droite, inférieure et gauche.

Les marges selon : élément imbriqué et élément non imbriqué

Les marges sont interprétées selon leur contexte : un élément non imbriqué (dont le parent est la balise body) et un élément compris dans un autre bloc parent.

Le margin en cas d'un élément XHTML imbriqué

la marge d'un élément XHTML imbriqué dans un bloc parent, représente l'espace séparant les bords de l'élément enfant et les 'padding' (espacement interne) de l'élément parent. Remarquez l'exemple suivant : une image imbriquée dans un div qui a une couleur de fond jaune.

la propriété CSS margin

On a appliqué à l'image une marge supérieure et gauche de 150 pixels (margin-top: 150px; margin-left: 150px;). Le conteneur a reçu quant à lui, un espacement interne supérieur et gauche de 50 pixels (padding-top: 50px; padding-left: 50px;).

Remarquez que la marge de l'image commence à partir de ses bords jusqu'aux 'padding' de l'élément parent. Ceci sous-entend aussi que l'écart total séparant les deux bords des deux éléments (parent-enfant) équivaut à la valeur de la marge et du padding, en l'occurrence : 150 + 50 = 200 pixels.

Le margin en cas d'un élément XHTML non imbriqué

Le margin d'un élément XHTML non imbriqué, peut s'étendre jusqu'à l'un des deux éléments suivants :

Maintenant que vous avez compris le principe des marges, on va attaquer la syntaxe margin

Les propriétés CSS de marge (margin)

margin-top (marge supérieure)

Cette propriété permet de spécifier la marge supérieure d'un élément par rapport à celui qui le précède, à son élément parent ou au bord supérieur du document. Exemple :

h1 {
margin-top : 2cm ; /* une marge supérieure de 2 centimètres
sera appliquée aux titres N° 1 */
}

margin-bottom (marge inférieure)

Sert à fixer la marge inférieure d'un élément par rapport à l'élément suivant, au bloc conteneur ou le bord inférieur de la fenêtre, si notre élément se trouve en bas de page et qu'il n'est plus suivi d'un autre objet.

margin-left (marge gauche)

Même commentaire, sauf qu'il est utilisé pour spécifier la marge gauche. A ne pas confondre margin-left avec la propriété CSS text-indent (indentation) qui permet de mettre en retrait uniquement la première ligne d'un bloc de texte notamment un paragraphe. La propriété CSS margin-left a pour effet de pousser tout le bloc vers la gauche et non uniquement la première ligne.

margin-right (marge droite)

Ah oui, ça me revient ! Elle permet de spécifier la marge droite.

La propriété générique 'margin'

Cette propriété regroupe les quatre mentions qu'on vient de voir. Grâce à la méga-propriété margin, il est possible de définir nos quatre marges en une seule ligne sans recourir à quatre propriétés CSS distinctes. Exemple :

   
p {
margin: 30px ; /* les quatre marges auront une longueur de 30 pixels */
}

Le navigateur interprète différemment les marges en fonction du nombre de valeurs spécifiées :

Vous avez un large choix d'unités de mesure :

Vous avez aussi droit aux valeurs négatives. Mais vous devez les utiliser avec méfiance et intelligence.

La propriété CSS margin appliquée à la balise body

Si vous appliquez ces propriétés à la balise <body>, vous allez spécifier les marges de votre document c'est-à-dire celles de la zone d'affichage. Exemple :

body {  	
margin-top: 98px;  	
margin-right: 36px;  	
margin-bottom: 12px;  	
margin-left: 65px;  
}  
Ou tout simplement : 
body {
margin: 98px 36px 12px 65px;
} 

Voici une illustration de ce que vous allez obtenir :la propriété CSS margin avec la balise body

Cette illustration n'est qu'une simplification de la réalité, sinon il faut prendre en considération les 'padding' spécifiés à l'élément body, qui eux aussi jouent le même rôle que les marges pour la balise <body>.

La fusion de marges

La compréhension de ce phénomène est trop importante, car ça permet d'éviter certains problèmes de mise en page. Vous devez savoir qu'en cas de conflit entre les marges verticales, le navigateur ne les additionne pas, mais plutôt il reprend uniquement la marge la plus importante, ce qui permet d'obtenir un rendu visuel qui est dans la plupart des cas satisfaisant, et d'éviter des marges trop importantes qui risquent de dénaturer la mise en page du document.

Avant d'entrer dans le vif du sujet, sachez que le phénomène appelé 'fusion de marges' ne concerne que les marges verticales et n'intéresse que les éléments de type bloc superposés en suivant un flux naturel.

Le principe 'fusion de marges' stipule qu'en cas de conflit d'une marge supérieure avec une marge inférieure de deux blocs successifs, le navigateur applique la marge la plus importante, si les deux marges sont positives. Mais lorsque l'une des deux marges a une valeur négative, l'espace effectif entre les deux éléments sera la mention positive, déduction faite de la mention négative. Si les deux marges sont négatives, la marge négative la plus importante sera déduite de zéro.

Pour plus de détails, le navigateur invoque le phénomène de fusion de marges dans les deux cas suivants :

Blocs superposés en flux naturel

Grosso modo, les marges verticales de deux blocs superposés en flux naturel se fusionnent. Si le flux naturel a été dénaturé par le positionnement CSS (positionnement absolu ou fixe) ou bien avec la propriété CSS float. Le principe de fusion de marges n'opère plus.

Blocs imbriqués

Le navigateur peut fusionner les marges de deux blocs imbriqués, et c'est ça qui pose le plus souvent des problèmes de mise en page. En fait un élément enfant transmet sa marge à son conteneur si et seulement si ce dernier (élément parent) n'a ni bordure (border) ni espacement (padding). Puis le navigateur compare les deux marges : celle de l'élément parent et celle transmise par l'enfant, ensuite il applique les règles traditionnelles de fusionnement de marges qu'on vient de voir. Exemple :

.parent {
background: #4044FB;
margin: 20px;
}
.enfant {
margin: 30px;
background: #FFFF80;
border: solid;
} Puis dans le corps du document : <div class="parent">
<p class="enfant">Paragraphe 'enfant' qui a quatre marges de 30 pixels et qui est imbriqué dans un div 'parent' qui n'a ni 'padding', ni 'border'</p>
</div>

Aperçu

 Paragraphe 'enfant' qui a quatre marges de 30 pixels et qui est imbriqué dans un div 'parent' qui n'a ni 'padding', ni 'border'.

La marge de 30 pixels de l'élément enfant a été transmise à l'élément parent, et puisque la marge reçue de l'élément enfant (30 pixels) et supérieure à celle spécifiée à l'élément parent (20 pixels), le navigateur va appliquer en définitive une marge de 30 pixels au-dessus et en-dessous du bloc div marqué par un fond bleu. Vous pouvez vous-mêmes constater que la marge qui sépare le conteneur bleu et les deux éléments en haut (le titre 'aperçu') et en bas (le présent paragraphe) est égale à 30 pixels.

Pour annuler l'effet de fusion de marges, il suffit d'ajouter une bordure ou un padding à l'élément parent. Donc la classe '.parent' deviendra :

.parent {
background: #4044FB;
margin:20px; border: solid;
} ou bien : .parent {
background: #4044FB;
margin:20px; padding: 1px; /* notez qu'un seul pixel suffira */
}

Aperçu 1

  Paragraphe 'enfant' qui a quatre marges de 30 pixels et qui est imbriqué dans un div 'parent' qui n'a ni 'padding', ni 'border'.

Aperçu 2

 Paragraphe 'enfant' qui a quatre marges de 30 pixels et qui est imbriqué dans un div 'parent' qui n'a ni 'padding', ni 'border'.

Avant de poursuivre, sachez que le phénomène de fusion de marges ne peut intéresser que l'élément parent et son premier et dernier enfant (en cas d'imbrication de plusieurs éléments dans un bloc).

Le navigateur applique par défaut des marges aux éléments XHTML. Si vous voulez que votre navigateur adopte des marges plus petites que celles adoptées par défaut, vous serez amené à utiliser des valeurs négatives qui seront retranchées des marges qui correspondent au réglage par défaut. Par exemple si vous jugez que les marges inférieures des titres N° 1 sont trop importantes, vous pouvez les atténuer en tapant par exemple :

h1 { 
margin-bottom: -8px; /* la marge qui sera appliquée est la marge
par défaut déduction faite de 12 pixels, attention pour des valeurs
trop importantes. En fait si le margin-bottom est supérieur
à la marge par défaut, le contenu suivant sera placé sur votre titre */ 
}

Centrer horizontalement un bloc

Pour centrer horizontalement un bloc, il faut passer les deux propriétés CSS margin-left et margin-right avec la valeur auto, pour qu'elles reçoivent la même valeur. Grâce à la valeur auto l'élément sera centré horizontalement dans son parent.

On en a fini pour de bon avec le modèle des boîtes CSS. On va basculer un petit peu vers le XHTML, histoire de contourner un peu la lassitude Chapitre suivant : la syntaxe XHTML des tableaux.

Aidez la Communauté des Étudiants !