CSS : padding - Web Formation

Description

La propriété padding définit l’espace intérieur d’un élément.

Il s’agit de l’espace entre le contenu et la bordure. Contrairement à margin, le padding fait partie de la boîte de l’élément et augmente donc sa taille visuelle.

Elle s’inscrit dans le modèle de boîte CSS.

Propriétés détaillées

padding-top : espace intérieur supérieur
padding-right : espace intérieur droit
padding-bottom : espace intérieur inférieur
padding-left : espace intérieur gauche

Valeurs possible

Voici quelques exemples de valeurs possibles :

Valeur	Exemple	Description
Longueur	`10px`, `1rem`, `5%`	Unité fixe ou relative ; la valeur la plus fréquente.
0	`padding: 0;`	Aucun espace intérieur.

Propriété raccourcie

La propriété padding est une version raccourcie qui accepte 1 à 4 valeurs :

Syntaxe	Exemple	Interprétation
1 valeur	`padding: 20px;`	Tous les côtés = 20px
2 valeurs	`padding: 10px 20px;`	Vertical = 10px, horizontal = 20px
3 valeurs	`padding: 5px 10px 15px;`	Haut = 5, horizontal = 10, bas = 15
4 valeurs	`padding: 5px 10px 15px 20px;`	Haut – Droite – Bas – Gauche (sens des aiguilles d’une montre)

Exemple

Démonstration interactive : padding

Choisissez une valeur

Aperçu

Lorem ipsum dolor sit amet, conse tetur adipis cing elit. Mae cenas commo do felis risus. Mauris sit amet urna varius, venenatis justo ac, feugiat elit.

30px tout autour des éléments

Code HTML & CSS

<div class="demo">Lorem ipsum dolor sit amet, conse tetur adipis cing elit. Mae cenas commo do felis risus. Mauris sit amet urna varius, venenatis justo ac, feugiat elit.</div>

<div class="demo">Lorem ipsum dolor sit amet, conse tetur adipis cing elit. Mae cenas commo do felis risus. Mauris sit amet urna varius, venenatis justo ac, feugiat elit.</div>

.demo {
    background-color: lightgrey;
    padding: 20px; /* 30px tout autour des éléments */
}

.demo {    background-color: lightgrey;    padding: 20px; /* 30px tout autour des éléments */}

.demo {
    background-color: lightgrey;
    padding: 40px 30px 20px 10px; /* Haut, droite, bas, gauche */
}

.demo {    background-color: lightgrey;    padding: 40px 30px 20px 10px; /* Haut, droite, bas, gauche */}

.demo {
    background-color: lightgrey;
    padding: 1rem 4rem; /* haut/bas et droite/gauche */
}

.demo {    background-color: lightgrey;    padding: 1rem 4rem; /* haut/bas et droite/gauche */}