Marges (padding et margin)

Les marges

Avant de commencer, notons bien tout d'abord que deux notions de marges seront abordées dans ce chapitre :

• La marge externe définit l'espace entre le bloc et son extérieur
• La marge interne définit l'espace entre le bloc et son contenu

Notons également qu'un bloc désigne un élément de type bloc comme le paragraphe, les div, etc.

Les marges externes avec margin

La "marge externe" est la zone "margin". D'où le nom de la propriété : MARGIN. Cette dernière spécifie d'un coup la valeur de la marge pour les quatre côtés à la fois. On peut mettre comme valeur une longueur pour définir une largeur fixe. Il est aussi possible de mettre un pourcentage.

Dans ce cas, on mettra le pourcentage calculé par rapport à la taille du bloc conteneur. Et une dernière possibilité sera de mettre auto qui correspond à une valeur automatique définie par le navigateur. Si on ne spécifie qu'une valeur dans la propriété margin, celle-ci s'applique à tous les côtés.

Code CSS :

.margin {margin: 4cm;}

Code XHTML :

<p>Ceci est un paragraphe sans marge </p>
<p class="marge">Ceci est un paragraphe avec marge </p>
<p>Ceci est un paragraphe sans marge </p>

Celui-ci va provoquer un retrait de 4cm par rapport à l'extérieur dans tous les côtés du bloc.

S'il y a deux valeurs, 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.

Code CSS :

/*retrait haut+bas et droite+gauche*/
.margin{ margin : 3cm 10cm ; }

En cas de 3 valeurs, la première est celle de la marge du haut. La deuxième est celle des marges gauche et droite. La marge du bas est définie par la troisième.

Code CSS :

.marge { margin: 2px 10cm 4px ; }

Si les quatre valeurs sont spécifiées, celles-ci s'appliquent respectivement aux marges du haut, de droite, du bas et de gauche.

Code CSS :

.marge { margin: 2cm 10cm 4cm 6cm;}

Il est parfois possible (sauf pour width) d'employer des valeurs négatives. Seulement la définition de la marge doit être utilisée avec précaution sinon on aura des problèmes au niveau de l'affichage. En mettant une valeur margin= 0 dans la balise body par exemple, on risque de nuire à la lisibilité de la page. En fait cela coïncide avec la bordure de la fenêtre du navigateur et donc le contenu sera collé sur le bord.

Les marges internes avec padding

Le principe reste le même que tout à l'heure sauf qu'à la place de margin, on utilise padding. Le padding est une zone, appelée aussi "marge interne" ou "intervalle". Elle est utilisée pour entourer de marge le "contenu" à l'aide de 4 valeurs. Concrètement, ça sert à définir une distance entre le contenu d'une boîte et la bordure de ce dernier.

Code CSS :

.padding
{


border: solid 2px #990000;
padding: 50px;
width: 350px;
text-align: justify;


}

En faisant un petit rappel sur les bordures, on a vu deux cas. Il était possible de définir la bordure sur les quatre côtés ou la définir séparément sur chacun des côtés.

Il en est de même pour les marges internes. On a pu définir à la fois le retrait en haut, en bas, à gauche et à droite grâce à la propriété margin ou padding. Une autre façon serait aussi de les définir séparément. Il suffit de rajouter les mots clé 'top, bottom, left, right' aux margin ou aux padding.

Liste des propriétés de margin

• margin-top : marge extérieure en haut
• margin-bottom : marge extérieure en bas
• margin-left : marge extérieure à gauche
• margin-right : marge extérieure à droite

Liste des propriétés de padding

• padding-top : marge intérieure en haut
• padding-bottom : marge intérieure en bas
• padding-left : marge intérieure à gauche
• padding-right : marge intérieure à droite