Fiche CSS : Marges

Objet de la fiche :

État de la fiche

Plan de la fiche

| Avant propos |
| L'attribut margin |
| L'attribut padding |
| Exemples |
| Application au projet de site web |

Avant propos

Les marges permettent d'isoler un élément HTML de son environnement, ce qui permet d'aérer les propos ou les présentations et ainsi obtenir des pages fluides et plus faciles à consulter que des pages compactes et très denses.

Deux type d'attributs s'appliquant à l'ensemble des balises HTML, sont à notre disposition : les attributs margin et padding.

Le shéma ci dessous permet de comprendre la différence entre ces deux attributs ;

margin ou marge externe agit sur l'espace à laisser libre autour de l'élément de lui-même, c'est à dire entre l'environnement et l'extérieur de sa bordure (même si celle ci n'est pas visible elle existe tout de même).
padding ou marge interne agit sur l'espace à laisser libre entre la bordure inférieure de l'élément, qui même si elle n'est pas visible existe tout de même, et le contenu de l'élément.

Les attributs décrits dans cette fiche vont vous permettre de régler les espaces libres globalement (les quatre cotés en même temps) ou individuellement (réglages spécifiques par coté). Ces attributs sont applicables sur l'ensemble des balises HTML ou XHTML.

L'attribut margin

Les marges sont transparentes et ne font pas partie de la dimension de l'élément.

Valeurs de l'attribut margin
Attributs	Fonctions	Valeurs
margin associé à 1 valeur	Spécifie l'espace externe pour les quatre cotés. Exp. margin:0.3em	pixels, %², em, auto
margin associé à 2 valeurs	La première valeur défini l'espacement externe en haut et en bas, la seconde défini l'espacement externe à gauche et à droite. Exp. margin:0.3em 5px
margin associé à 4 valeurs	Espaces externes définis pour chacun des cotés dans le sens haut, droite, bas, gauche (à partir de haut dans le sens des aiguilles d'une montre. Exp. margin:0.3em 01em 5px 2px
margin-top	Spécifie la marge externe individuellement coté par coté. Exp. margin-top:0.3em. top : haut bottom : bas left : gauche right : droite	pixels, %², em, auto
margin-bottom
margin-left
margin-right

L'attribut padding

La marge interne dégagée par la valeur de l'attribut padding prend comme couleur celle de l'arrière plan de l'élément considéré. Ces marges font partie intégrante de la dimension de l'élément :
exp. hauteur de l'élément = hauteur de l'élément de base + hauteur des marges internes supérieures et inférieures.

Valeurs de l'attribut padding
Attributs	Fonctions	Valeurs
padding associé à 1 valeur	Spécifie la marge interne pour les quatre cotés. Exp. padding:0.3em	pixels, %², em, auto
padding associé à 2 valeurs	La première valeur défini l'espacement interne en haut et en bas, la seconde défini l'espacement interne à gauche et à droite. Exp. padding:0.3em 5px
padding associé à 4 valeurs	Espaces internes définis pour chacun des cotés dans le sens haut, droite, bas, gauche (à partir de haut dans le sens des aiguilles d'une montre.Exp. padding:0.3em 01em 5px 2px
padding-top	Spécifie la marge interne individuellement coté par coté. Exp. padding-top:0.3em	pixels, %², em, auto¹
padding-bottom
padding-left
padding-right

Note² : Pour les valeurs en % la dimension de référence est la largeur de la boîte mère.

Exemple

Voici un exemple comportant des attributs padding et margin. Les bordures ont été définies afin de bien montrer le périmètre des actions de ces attributs.

La loi est l'expression de la volonté générale. Tous les citoyens ont de concourir personnellement ou par leurs représentants à sa formation.

Tous les citoyens, étant égaux à ses yeux, sont également admissibles à toutes dignités, places et emplois publics,

selon leur capacité et sans autre distinction que celle de leurs vertus et de leurs talents.

La libre communication des pensées et des opinions est un des droits les plus précieux de l'homme ; tout citoyen peut donc parler, écrire, imprimer librement, sauf à répondre de l'abus de cette liberté dans les cas déterminés par la loi.

Le document ci dessus utilise des feuilles de style en ligne

<!DOCTYPE html>
									<html lang="fr">
										<head>  
										<title>Marges</title>  
											<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
										</head>  
										<body>  
											<table style="border:dashed 0.1em gray; width:80%;text-align:center;margin:auto">  
												<tr>  
													<td width="100%">La loi est l'expression de la volonté générale. Tous les citoyens   
														ont  de concourir personnellement ou par leurs représentants à   
														sa formation.   
														<p style="border:solid 0.1em red;padding:1em 1em;margin:1.5em"> Tous les citoyens, étant égaux à ses yeux, sont également admissibles à   
														toutes dignités, places et emplois publics, </p><p>selon leur capacité et   
														sans autre distinction que celle de leurs vertus et de leurs   
														talents.</p>  
														<p><img style="border:solid 0.1em blue;margin:2em;padding:2.5em"   
															src="http://monwebfacile.free.fr/Images/Balance.gif" width="54" height="57" alt="" />  
														La libre communication des pensées et des opinions est un des droits   
														les plus précieux de l'homme ; tout citoyen peut donc parler,   
														écrire, imprimer librement, sauf à répondre de l'abus de cette   
														liberté dans les cas déterminés par la loi.</p>  
													</td>  
												</tr>  
											</table>  
										</body>  
									</html>

Application au projet de site web

Ces modifications sont à effectuer dans la fichier de feuille de style externe CSSExterneScreen.css

Utilisez l'attribut padding pour décaler sur la droite le texte des articles de la liste "Choisissez et commandez" de 1em.

Retrouvez la solution