Gérer les marges en CSS

Pascale Lambert

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

- Titre : Gérer les marges en CSS

- Auteur : Pascale Lambert

- Parution : 29 juin 2010

- Mise à jour : 24 novembre 2010

- Licence : 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 et 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.

Sommaire

- I. Gérer les marges en CSS

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

- I-A-1. Déclaration des tailles

- I-B. Exemple basique

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

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 :

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

margin:2px 5px 2em 0;

revient à :

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.

padding:2px 5px;

revient à :

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

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

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.