padding-left

La propriété padding-left d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. padding-left ne peut pas recevoir de valeurs négatives.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

La propriété raccourcie padding permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-left donc).

Syntaxe

/* Valeurs de longueur */ 
/* Type <length>       */
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/* Valeurs de proportions */ 
/* Type <percentage>      */
padding-left: 10%;

/* Valeurs globales */
padding-left: inherit;
padding-left: initial;
padding-left: unset;

Valeurs

<length>

Cette valeur définit une largeur positive. Voir <length> pour plus de détails.

<percentage>

Un pourcentage en rapport avec la largeur du bloc englobant. Voir <percentage> pour plus de détails.

Syntaxe formelle

<length> | <percentage>

Exemples

HTML

<p class="padd">
  Elle n’avait pas bu la moitié de la bouteille, 
  que sa tête touchait au plafond et qu’elle fut
  forcée de se baisser pour ne pas se casser le 
  cou.
</p>

CSS

.padd {
  padding-left: 20%;
  border: solid 1px;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le modèle de boîtes CSS
• La propriété raccourcie padding qui permet de paramétrer padding-top, padding-right, padding-bottom et padding-left.