Les marges internes (padding) permettent de créer de l'espace entre la bordure d'une boîte (border) et le texte ou le contenu de l'élément HTML.

Les éléments de type bloc ont des marges sur les 4 côtés de leur boîte.

Les éléments en ligne ont des marges uniquement à droite et à gauche.

Marges internes type bloc
Marges internes type en ligne

On ne peut pas affecter de couleur aux marges internes : elles prennent la couleur de fond de la boîte ou laissent apparaitre son image de fond.

Certains éléments peuvent avoir des marges internes prédéfinies par les navigateurs (par exemple body, p, ul, etc). Ces valeurs prédéfinies peuvent être différentes d'un navigateur à un autre.
Pour être sûr d'avoir les mêmes marges sur tous les navigateurs, il est conseillé de les fixer dans la feuille de style pour les éléments utilisés dans les pages (voir Principes généraux => La cascade).

Si les marges internes ne sont pas prédéfinies ou omises, elles ont par défaut la valeur 0.

L'unité de taille pour définir une marge est à choisir en fonction du dispositif d'affichage. Par exemple il ne faut pas utiliser des centimètres pour afficher sur un écran pour lequel on privilégiera le pixel CSS (`px`), le cadratin (`em`), le pourcentage (`%`) ou la référence à la racine du document (`rem`).
Les unités utilisées peuvent être différentes pour chacune des marges d'un élément.

Si les marges internes hautes et basses (padding-top et padding-bottom) sont exprimées en pourcentage (`%`), la valeur est calculée par rapport à la longueur de la boîte et pas par rapport à la hauteur.

### La propriété padding

La propriété padding est un raccourci qui permet de définir les marges des 4 côtés en une seule fois.

On peut affecter 1, 2, 3 ou 4 valeurs à la propriété padding.

    h1 { padding: 5px; }
    h2 { padding: 4px 8px; }
    h3 { padding: 5px 6px 7px 8px; }

raccourci padding

Remarque : la forme avec 3 valeurs est rarement utilisée : la marge haute aura la 1ère valeur, les marges droite et gauche auront la 2ème valeur et la marge basse aura la 3ème valeur.

Exemple : marges avec raccourci
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p>Les marges internes du paragraphe sont bien visibles en lui mettant une bordure. Les marges internes sont l'espace entre le texte et la bordure.</p> <p>Les marges internes prennent la couleur de fond de la boîte.</p> </body> </html>
Fichier CSS : styles.css
p { width: 300px; border: 2px solid cyan; padding: 30px; } p:nth-of-type(2) { padding: 1em 20px; background: lightcyan; }

### Propriétés individualisées

Les propriétés padding-top, padding-right, padding-bottom et padding-left permettent de définir individuellement les marges des 4 côtés de la boîtes.

La valeur des propriétés de marge est un nombre d'unités.

    div {
    	padding-top: 10px;
    	padding-right: 1em;
    	padding-bottom: 10%;
    	padding-left: 2.5rem;
    }

Exemple : marges individualisées
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Pas de marge interne</h3> <p>Quand les boîtes ont des bordures, la marge interne permet d'éloigner le texte du bord et de le rendre plus lisible.</p> <h3>Avec marge interne</h3> <p class="marge">Quand les boîtes ont des bordures, la marge interne permet d'éloigner le texte du bord et de le rendre plus lisible.</p> </body> </html>
Fichier CSS : styles.css
p { border: 2px solid red; width: 300px; } .marge { padding-top: 0.3em; padding-right: 10px; padding-bottom: 0.3em; padding-left: 10px; }

L'exemple suivant sélectionne tous les éléments a qui ont un attribut `target` et ajoute l'icone avant le lien pour signaler que le lien ouvre dans un nouvel onglet. Pour l'image ne s'affiche pas sous le texte, on déclage celui-ci avec une marge interne à gauche.

Exemple : marge interne
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Hagard des Etoiles</h3> <img src="../exemples/img/darkv2.png" align="left"> <p><a href="luke.html" target="new">Luke</a>, on a été racheté par <a href="http://disney.com"> Disney</a>.</p> <p>Rejoint nous, et ensemble nous régnerons sur <a href="http://www.disneylandparis.com/" target="new">Disneyland Paris</a>. </p> </body> </html>
Fichier CSS : styles.css
a[target] { background: url(onglet.png) no-repeat; padding-left: 20px; }