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

Article lu fois.

L'auteur

Pascale Lambert

L'article

Publié le 29 juin 2010 - Mis à jour le 24 novembre 2010

Version PDF Version hors-ligne

ePub, Azw et Mobi

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).

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;
}

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.

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.