Grâce au style background-color, on voir très clairement les zones. Mais, la puissance du CSS ne se limite pas aux couleurs. Nous allons apprendre à modifier les marges, extérieures et intérieures.

margin

Vous avez remarqué - en regardant ce fichier déjà vu - que les paragraphes sont un peu en retrait par rapport aux bords ( gauche et droit ). Il existe une marge à gauche et à droite ! À nouveau, c'est le navigateur qui a choisi à notre place, la largeur des marges.

La grandeur des marges, choisie par le navigateur, peut varier en fonction du conteneur ( balise )

Le style margin concerne l'espace libre à l'extérieur du bloc.

margin-left est le style pour la marge de gauche
margin-right est le style pour la marge de droite

L'unité de distance sur un terrain est le mètre et s'écrit "m".
L'unité de distance sur un écran est le pixels et s'écrit "px".

Attention ! Entre le nombre et "px", l'espace est interdit.

Ajoutons, un nouveau style à notre fichier CSS

body { background-color: orange; color: white;}
p { background-color: gray; margin-left: 50px;}

Et, appliquons ces styles au fichier HTML margin-left.htm.

Nous constatons que les paragraphes ont "reculé" vers la droite, leur marge de gauche étant plus élevée.

Nous avons aussi l'impression qu'entre deux paragraphes il existe une ligne vide. En réalité, s'agit des marges verticales ...

margin-top est le style pour la marge supérieure
margin-bottom est le style pour la marge inférieure

Ajoutons, ces nouveaux styles à notre fichier CSS

body { background-color: orange; color: white;}
p { background-color: gray; margin-left: 50px; margin-top: 0px; margin-bottom: 0px; }

Et appliquons ces styles au fichier HTML margin-top.htm.

Nous constatons que maintenant les paragraphes se touchent.

Si on veut définir toutes les marges, on constate que le code CSS s'allonge ...
On peut aussi écrire : margin : 0px 0px 0px 50px où les 4 indications représentent respectivement la marge supérieure (top), la marge droite (right), la marge inférieure (bottom) et la marge gauche (left). Le sens dans lequel sont donnés les indications est le sens horlogique en commençant à 12 heures (top).
Il est aussi possible de ne donner que deux indications concernant respectivement les verticales et les marges horizontales. Dans ce cas, la marge supérieure est égale à la marge inférieure (premier nombre); et, la marge droite est égale à la marge gauche (second nombre). Exemple : margin : 0px 50 px
Enfin, il est possible de ne donner qu'une seule indication. Dans ce cas, toutes les marges valent ce nombre. Exemple : margin : 0px ;

Réécrivons notre fichier CSS

body { background-color: orange; color: white;}
p { background-color: gray; margin: 0px;}

Et appliquons ces styles au fichier HTML margin2.htm.

On constate que, l'espace entre les paragraphes étant nul, ils se touchent.

padding

Vous avez remarqué que le texte touche les bords du paragraphe. Vous l'avez deviné ! Il existe aussi des marges à l'intérieur du bloc.

Le style padding concerne la marge à l'intérieur du bloc. Pour le reste, ce qui a été dit à propos du style margin est applicable au style padding.

Ajoutons, un nouveau style à notre fichier CSS.

body { background-color: orange; color: white;}
p { background-color: gray; margin: 0px; padding-left: 50px;}

Et appliquons ces styles au fichier HTML padding-left.htm.

On constate que le texte ne touche plus le bord gauche des paragraphes.

Sans padding -------------------------- avec padding

On constate aussi que les paragraphes ne touchent pas les bords de la fenêtre. Il existe de l'orange entre le bord supérieur de la fenêtre et le premier paragraphe. Le conteneur principal, body, possède aussi de marges intérieures.

Récrivons notre fichier CSS.

body { background-color: orange; color: white; padding: 0px;}
p { background-color: gray; margin: 0px;}

Et, appliquons ces styles au fichier HTML padding-body.htm.

Rien ne se passe ! Les marges intérieures du body sont encore visibles. On voit encore de l'orange autour des paragraphes ! ...

En réalité, le style pour les marges intérieures du body ( qui ne possède pas de marges extérieures ) est margin !

Rassurez-vous, c'est la seule exception. body est le seul conteneur qui ne peut pas avoir de marges externes ...

body {
    background-color: orange;
    color: white;
    margin: 0px; /* !!! marges intérieures !!! */
    }

p { background-color: gray;
    margin: 0px;   /* marges extérieures */
    padding: 0px;  /* marges intérieures */
    }

Et, appliquons ces styles au fichier HTML margin-body.htm.

Ouf ! Maintenant, je sais comment contrôler la largeur des marges intérieures du body.

Évidemment, comme les styles background-color et color, les styles margin et padding s'appliquent à quasi toutes les balises.

Voici quelques fichiers HTML, illustrant ce que nous avons vu :

1. margin.htm : les marges extérieures sont nulles ( et la taille du lien augmente lors de son survol par la souris )
2. padding.htm : les marges intérieures = 30px
3. padding2.htm : body { margin: 0px; } !
4. padding3.htm : Lorsque la page est plus petite que la fenêtre du navigateur, la couleur de fond du body ( ici, jaune ) réapparaît.
5. Constatons l'évolution.
   1. Fichier HTML sans CSS
   2. Le même fichier HTML avec CSS ( avec des couleurs )
   3. avec CSS ( avec des couleurs et des marges )

Consultez le code-source de ces fichiers HTML pour retrouver l'adresse des fichiers CSS et consulter les codes CSS.