IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Gérer les marges en CSS

Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures. Quand on a dit ça, on pourrait croire que ça suffit tant ça paraît simple.

En fait, ce n'est pas tout à fait vrai...

De la théorie à la pratique : tout ce que vous devez savoir sur les marges en CSS sans avoir besoin de le demander.

N'hésitez pas à nous faire part de votre avis sur cet article : 5 commentaires Donner une note à l´article (4.5)

Article lu   fois.

L'auteur

Site personnel

I. Gérer les marges en CSS

I-A. Définitions des marges intérieures (padding) et extérieures (margin)

Pour chaque élément HTML on peut donc définir l'espacement qui le séparera des autres éléments (margin) et les espacements intérieurs dont il peut bénéficier (padding).

Image non disponible
Par exemple :
Sélectionnez
<blockquote>
  <p>
    Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus. 
    Suspendisse potenti. Nullam facilisis neque et sem. 
    Proin placerat adipiscing urna.
    Aenean sollicitudin.
  </p>
</blockquote>

blockquote est l'élément parent, p est l'élément enfant.
(Pour rappel, la balise blockquote doit être utilisée pour des blocs de citation.)

I-A-1. Déclaration des tailles

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si l'on veut qu'elles soient fixes ou proportionnelles.

On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom (bas), -left (gauche), ou synthétiser les quatre d'un seul coup (la première valeur étant celle du haut, puis on tourne dans le sens des aiguilles d'une montre).

 
Sélectionnez
margin:2px 5px 2em 0;

revient à :

 
Sélectionnez
margin-top:2px;
margin-right:5px;
margin-bottom:2em;
margin-left:0;

Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche.

 
Sélectionnez
padding:2px 5px;

revient à :

 
Sélectionnez
padding-top:2px;
padding-bottom:2px;
padding-right:5px
padding-left:5px;

I-B. Exemple basique

Appliquons des styles à l'exemple de code (X)HTML donné précédement.

Code CSS
Sélectionnez
blockquote {
  margin:0;
  padding:1px;
  background:#C00000 url(images/quadrillage.png)
}
p {
  margin:20px;
  padding:10px;
  background-color:#FFFAFA;
}
Image non disponible

I-C. Le modèle des boites (box model)

D'après le "box model", lorsqu'on attribue une taille à un élément de type block (à l'aide d'un width ou d'un height), les marges viennent s'ajouter à cette taille.

Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.

Code CSS
Sélectionnez
p {
  width:200px;
  padding:40px;
  margin:auto;
}

Le paragraphe aura une largeur totale de 200 + 2*40 = 280 pixels et sera centré dans son élément parent.

Image non disponible

Suite du tutoriel : Résoudre les problèmes de marges en CSS.

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 29/06/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.