Formation CSS les marges (Padding et Margin)

Formation CSS les marges (Padding et Margin), tutoriel & guide de travaux pratiques en pdf.

 
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.