Padding et margin

Deux propriétés complémentaires, elle semblent similaires et ont la même syntaxe mais ont un rôle différent.

Elles s'appliquent à la plupart des balises. Elles ne fonctionnent pas avec <span> sauf si on assigne la propriété display:block.
Les deux propriétés peuvent s'additionner.

Démonstration

Code HTML (avec DIV ou SPAN):

<div>
    <div>
        <img src="..." />
    </div>
</div>

Tous les calques externes ont un remplissage de 8px et les calques internes une marge de 8px. Seul le second calque à une largeur et une hauteur imposées. (voir code CSS en fin d'article).

DIV
DIV avec width et height 		SPAN

Lorsqu'elles sont spécifiées, la hauteur et la largeur données sont celles de l'image.
On voit que padding et margin augmentent la taille du calque externe sauf si les dimensions sont imposées auquel cas, le contenu est tronqué.

Syntaxe

padding: haut droit bas gauche;
margin: haut droit bas gauche;

Exemple:

padding: 8px 8px 8px 8px;

Raccourcis

Si l'on écrit:

padding: 16px 8px;

Le haut et le bas auront une marge interne de 16 pixels.
La droite et la gauche auront une marge interne de 8 pixels.
Il en est de même avec la propriété margin pour un espacement externe.

Si l'on écrit:

padding: 8px;

La même valeur de marge, 8 pixels s'appliquera de chaque coté.

Si l'on fournit trois valeurs, elle concerneront le haut, la droite, le bas.

Marges spécifiques

On peut désigner précisément à quel coté on appliquer une marge, interne ou externe.

Espacement interne:

Marge externe:

La déclaration:

padding: 8px;

équivaut à:

padding-top: 8px; 
padding-right: 8px; 
padding-bottom: 8px; 
padding-left: 8px;

Valeurs

Les valeurs des quatres paramètres peuvent être des valeurs absolues exprimée en pixels ou autres bases, ou des pourcentages.
Les pourcentages s'appliquent aux dimensions du conteneur, de la balise à laquelle ont donne ces marges. Les pourcentages d'espacement horizontaux peuvent s'appliquer selon la hauteur et non la largeur, voir la spécification à ce sujet.

Les valeurs de margin peuvent être négatives, cela a pour effet de déplacer l'élément, hors de son conteneur.

Les valeurs de padding doivent être positives.

Règle de réduction

Dans certains cas, quand des éléments s'imbriquent, les marges peuvent s'ajouter et dans d'autres, on ne retient que la plus grande des deux.

Les marges horizontales s'ajoutent toujours.

Les marges verticales s'ajoutent quand:

Les marges verticales se confondent quand :

D'autres règles s'appliquent à des cas plus précis et sont décrites dans la spécification CSS 2.1 et CSS 3 du modèle de boite.

Code source de la démonstration

Le premier calque a pour identifieur divouter, le second divouter2, le troisième spanouter.
Ils contiennent un calque interne dont le suffix est inner.

<style type="text/css">
#divouter, #divouter2, #spanouter { 
    padding:8px; border:1px dotted black;background:#093;
}
#divouter2 { 
   width:150px; height:100px; 
} 
#divinner, #divinner2, #spaninner { 
  margin:8px; background:white;
}
#spanouter {display:block;}
</style>

Code HTML complet:

<div id="divouter">
  <div id="divinner">
    <img src="/images/thumb-maurice.jpg" width="150" height="100" />
  </div>
</div>
DIV

<div id="divouter2">
  <div id="divinner2">
    <img src="/images/thumb-maurice.jpg" width="150" height="100"  />
  </div>
</div>	
DIV avec width et height

<span id="spanouter">
  <span id="spaninner">
    <img src="/images/thumb-maurice.jpg" width="150" height="100"  />
   </span>
</span>
SPAN

Références

© 2010-2022 Xul.fr