Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche CSS : Marges

Objet de la fiche :

État de la fiche Terminée validée


Plan de la fiche

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, %2, 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, %2, 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, %2, 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, %2, em, auto1
padding-bottom
padding-left
padding-right

 

Note2  : 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


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


Respectons la propriété intellectuelle